微信小程序開發(fā)簡(jiǎn)單教程

財(cái)知行 2018-12-19

展開全文

小程序開發(fā)準(zhǔn)備

在官網(wǎng)上直接注冊(cè)小程序賬號(hào)，可以管理你的小程序的權(quán)限，查看數(shù)據(jù)報(bào)表，發(fā)布小程序等操作。登錄賬號(hào)，獲取對(duì)應(yīng)的小程序的 AppID（創(chuàng)建小程序項(xiàng)目需要用到）。

接著下載微信開發(fā)者工具，建立了“普通快速啟動(dòng)模板”（選擇空目錄下才有此選項(xiàng)），或者直接選擇小程序官方Demo或者weui小程序版UI當(dāng)做學(xué)習(xí)Demo

創(chuàng)建小程序項(xiàng)目

小程序代碼構(gòu)成

微信小程序目錄

wxml文件

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

這個(gè)其實(shí)就是“html”，不能使用W3C的標(biāo)簽，轉(zhuǎn)而使用的是微信自定義的標(biāo)簽，常見的就是用<view>代替<div>，具體有哪些標(biāo)簽可以查看官網(wǎng)微信基礎(chǔ)組件。頁(yè)面結(jié)構(gòu)是以<page>為父節(jié)點(diǎn)節(jié)點(diǎn)，沒有<html>和<body>。

小程序wxml頁(yè)面

 下面代碼就是簡(jiǎn)單的數(shù)據(jù)綁定和事件： <!-- wxml代碼 -->
 <view bindtap="add"> {{count}} </view>
 Page({
 data: {
 count: 1
 },
 add: function(e) {
 this.setData({
 count: this.data.count + 1
 })
 }
 })

js文件

App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。App() 必須在根目錄下的app.js 中注冊(cè)，且不能注冊(cè)多個(gè)。

 App({
 onLaunch: function(options) {
 // 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
 },
 onShow: function(options) {
 // 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
 },
 onHide: function() {
 // 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
 },
 onError: function(msg) {
 // 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
 console.log(msg)
 },
 globalData: {
 // 全局變量，注意App()和Page不同，一個(gè)是globalData,一個(gè)是data
 name: 'Gensen'
 }
 //開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用 this 可以訪問(wèn)
 myMethod: function() {
 console.log(this.globalData.globalData); // "Gensen"
 }
 })

Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。相對(duì)一個(gè)全局一個(gè)局部，對(duì)應(yīng)每個(gè)頁(yè)面都有一個(gè)。

Page({
 data: {
 // 頁(yè)面的初始數(shù)據(jù)
 text: "This is page data."
 },
 onLoad: function(options) {
 // 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
 // 一個(gè)頁(yè)面只會(huì)調(diào)用一次，可以在 onLoad 中獲取打開當(dāng)前頁(yè)面所調(diào)用的 query 參數(shù)。
 },
 onReady: function() {
 // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 // 一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
 // 對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置。
 },
 onShow: function() {
 // 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 },
 onHide: function() {
 // 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 // 當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。
 },
 onUnload: function() {
 // 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 // 當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。
 },
 onPullDownRefresh: function() {
 // 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 // 需要在app.json中的`window`選項(xiàng)中或頁(yè)面配置page.json中開啟`enablePullDownRefresh`。
 // 當(dāng)處理完數(shù)據(jù)刷新后，`wx.stopPullDownRefresh`可以停止當(dāng)前頁(yè)面的下拉刷新。
 },
 onReachBottom: function() {
 // 頁(yè)面上拉觸底事件的處理函數(shù)
 },
 onShareAppMessage: function () {
 // 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
 return {
 title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
 path: '/page/logs/logs'
 }
 },
 onPageScroll: function() {
 // 頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)
 },
 onTabItemTap(item) {
 // 當(dāng)前是 tab 頁(yè)時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā)
 console.log(item.index)
 console.log(item.pagePath)
 console.log(item.text)
 },
 // 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁(yè)面的函數(shù)中用 this 可以訪問(wèn)
 viewTap: function() {
 // 直接修改 this.data 而不調(diào)用 this.setData 是無(wú)法改變頁(yè)面的狀態(tài)的，還會(huì)造成數(shù)據(jù)不一致
 this.setData({
 text: 'Set some data for updating view.'
 }, function() {
 // 回調(diào)函數(shù)
 })
 },
 customData: {
 hi: 'MINA'
 }
})

Page 實(shí)例的生命周期

js部分還包括路由、模塊、API（小程序開發(fā)框架提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等）后續(xù)再細(xì)講。wxss文件

WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。其實(shí)就是CSS改了個(gè)后綴名，不同的地方是多了rpx尺寸單位和樣式導(dǎo)入，樣式選擇器只能使用一部分，像后代子代選擇器就不能用了，目前支持的選擇器如下：

選擇器樣例樣例描述 .class .intro 選擇所有擁有 class="intro" 的組件 #id #firstname 選擇擁有 id="firstname" 的組件 element view 選擇所有 view 組件 element, element view, checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件 ::after view::after 在 view 組件后邊插入內(nèi)容 ::before view::before 在 view 組件前邊插入內(nèi)容定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 app.wxss 中相同的選擇器。

小程序全局樣式設(shè)置

配置文件

app.json

用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。程序啟動(dòng)默認(rèn)的第一個(gè)頁(yè)面，就是app.json的pages中的第一個(gè)頁(yè)面。

微信小程序app.json配置

注意：json文件不能注釋，不然會(huì)報(bào)錯(cuò)（上面圖片大誤）page.json

每一個(gè)小程序頁(yè)面也可以使用.json文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。頁(yè)面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

結(jié)尾

先簡(jiǎn)單介紹下微信小程序代碼結(jié)構(gòu)和不同文件對(duì)應(yīng)的功能和作用，后續(xù)有空將細(xì)講某個(gè)模塊或者一些常用的應(yīng)用場(chǎng)景。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：財(cái)知行 > 《計(jì)算機(jī)》

舉報(bào)/認(rèn)領(lǐng)