微信小程式開發教程

　　一、開發前準備

　　申請賬號、安裝開發者工具

　　二、檔案與目錄結構

　　1、程式主體：

　　app.js

　　app.json 程式配置

　　1.1、程式配置

　　登入後複製

　　pages 頁面路徑

　　window 頁面的視窗表現

　　tabBar 底部tab切換

　　networkTimeout

　　debug

　　{

　　"pages":[  //哪個寫在上面，哪個就是入口檔案

　　"pages/index/index",

　　"pages/movie/movie",

　　"pages/logs/logs"

　　]

　　}

　　app.wxss 公共樣式

　　2、頁面：

　　index.js

　　index.json 頁面配置

　　2.1、頁面配置

　　window 頁面的視窗表現

　　index.wxss 頁面樣式

　　index.wxml 頁面結構

　　三、註冊程式與頁面

　　1、註冊app，只需要註冊一次，可以得到一個程式的例項，可以被其他頁面訪問

　　在其他頁面，透過getApp全域性函式獲取應用例項 const app = getApp(); 獲取全域性資料：app.gldData; //{a:1}

　　登入後複製

　　App({

　　gldData:{ a:1 },

　　onLaunch:function(){  //一執行小程式就會執行

　　//初始化程式碼

　　}

　　})

　　2、註冊page，有幾個頁面，在每個頁面內都需要註冊

　　Page({

　　data:{

　　b:2

　　},

　　onLoad:function(){   //一進入頁面就會執行

　　console.log( this.data )  //{b:2}  透過this，獲取單個頁面內資料

　　}

　　})

　　四、程式生命週期

　　1、App

　　登入後複製

　　App({

　　//在小程式執行期間，只會執行一次

　　//程式銷燬之後(過了一段時間沒有執行或者手動刪除小程式)，再次啟動小程式就會執行

　　onLaunch(){

　　console.log('小程式啟動時執行')

　　},

　　//每次從後臺切換出來就會執行

　　onShow(){

　　console.log('切換到小程式時執行')

　　},

　　//每次切換到後臺就會執行

　　onHide(){

　　console.log('小程式被隱藏在後臺時執行')

　　}

　　})

　　2、Page

　　登入後複製

　　Page({

　　//tab之間的切換，不會讓頁面重新載入，也不會解除安裝，只會讓頁面顯示與隱藏

　　//在進行NavigatorTo連結跳轉的時候，目標頁面會被載入onLoad，原始頁面會被隱藏onHide

　　//此時點選導航條上的回退按鈕NavigatorBack，目標頁面會onShow，不會onLoad，原始頁面會被解除安裝onUnload

　　//頁面載入的時候執行，只會執行一次

　　onLoad(){   },

　　//頁面第一次渲染完成之後執行，只會執行一次

　　onReady(){  },

　　//頁面顯示就會執行，會執行多次，比如tab切換從a頁面切換到b頁面，那麼也就是等於b頁面顯示了

　　onShow(){   },

　　//頁面隱藏就會執行，會執行多次，比如tab切換從a頁面切換到b頁面，那麼也就是等於a頁面隱藏了

　　onHide(){   },

　　//頁面解除安裝的時候執行，只會執行一次

　　onUnload(){ },

　　})

　　五、資料與列表渲染

　　1、資料在index.js裡面的data裡面定義，

　　登入後複製

　　Page({

　　data:{ //資料型別，可以是字串、陣列、物件、數值等等

　　name:'kate'

　　}

　　})

　　要輸出到頁面上，直接就是<view>{{name}}</view>即可

　　2、渲染陣列 wx:for wx:key

　　登入後複製

　　Page({

　　data:{

　　names:[ 'kate','jim','lily' ],

　　age:['1','2','3']

　　}

　　})

　　<view wx:for="{{names}}" wx:key="*this">{{item}}</view>

　　3、條件渲染 變數為true，即滿足條件就進行渲染，反之就不進行渲染

　　登入後複製

　　<view wx:if="{{ score>60 && score<90 }}">等級B</view>

　　<view wx:elif="{{ score<60 && score>0 }}">等級C</view>

　　<view wx:else>等級A</view>

　　4、塊級渲染block，block是虛擬元件，不會出現在頁面上

　　同時顯示多個元素

　　登入後複製

　　<block wx:if="{{ score==80 }}">

　　<view>{{ name }}</view>

　　<view>{{ score }}</view>

　　<view>等級A</view>

　　</block>

　　<block wx:else>

　　<view>{{ name }}</view>

　　<view>{{ score }}</view>

　　<view>等級B</view>

　　</block>

　　5、使用模板

　　登入後複製

　　Page({

　　data:{

　　names:[ 'kate','jim','lily' ],

　　age:['1','2','3'],

　　score:80,

　　name:'aaa'

　　}

　　})

　　先定義模板：

　　<template name="myTemplate1">

　　<view>我是模板</view>

　　<view>{{name}}</view>

　　</template>

　　<template name="myTemplate2">

　　<block wx:for="{{age}}" wx:key="*this">

　　<view>{{item}}</view>

　　<view>啦啦啦</view>

　　</block>

　　</template>

　　<template name="myTemplate3">

　　<block wx:if="{{score==80}}">

　　<view>{{name}}</view>

　　<view>{{score}}</view>

　　<view>等級A</view>

　　</block>

　　<block wx:else>

　　及格

　　</block>

　　</template>

　　使用：

　　<view>

　　<template is="myTemplate1" data="{{name:'kate'}}"></template>

　　<template is="myTemplate2" data="{{age:age}}"></template>

　　<template is="myTemplate3" data="{{name,score}}"></template> //data="{{name,score}}等價於data="{{name:name , score:score}}

　　</view>

　　6、import與include

　　可以把模板定義在專門的template.wxml裡面

　　要使用裡面的模板，只需要在對應的wxml裡面

　　<import src="template.wxml" /> //import引入的模板，你需要在頁面上告知使用的是哪一個模板，<template is="myTemplate1" data="{{name:'kate'}}"></template>

　　<include src="template.wxml" /> //include引入模板，在頁面上什麼位置寫上，那麼模板程式碼就在什麼地方顯示

　　微信小程式開發教程

　　六、事件

　　繫結事件

　　登入後複製

　　<view bind:tap="tabHandle" data-name="容器">

　　<text>點選</text>

　　</view>

　　tabHandle(event){

　　//event：是事件物件，裡面有detail等屬性

　　//target：事件從哪裡觸發的

　　//currentTarget：事件在哪個上面執行的，透過event.currentTarget.dataset.name可以獲取到到"容器"這個自定義值

　　//比如點選text，那麼target就是text，currentTarget是外面的view，因為冒泡了，所以儘管點選text，tabHandle事件仍然會觸發

　　}

　　如果要阻止事件冒泡，那麼就使用catch，而不是bind，如：

　　<view catch:tap="tabHandle">

　　<text>點選</text>

　　</view>

　　這樣點選text，tabHandle事件仍然會觸發，但是view上一級就不會冒泡上去了，因為阻止冒泡了

　　七、樣式wxss

　　尺寸單位：rpx，只要設定寬度為750rpx，那麼不管在什麼手機上都是佔滿一整個螢幕

　　引入樣式：@import '../style.wxss'

　　全域性樣式與區域性樣式：定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

　　八、微信小程式指令碼語言wxs

　　不支援es6的語法，就當成es5的javascript

　　登入後複製

　　定義(寫在模板頁面內)：

　　<wxs module="tool">

　　function createName(names){

　　return names.split(',')

　　}

　　module.exports = createName

　　//tool就表示匯出的函式createName

　　</wxs>

　　使用：

　　<view wx:for="tool('1,2,3,4')">{{item}}</view>

　　也可以將wxs程式碼寫在一個單獨的.wxs檔案內，然後引入這個檔案，類似於js

　　tool.wxs

　　function createName(names){

　　return names.split(',')

　　}

　　module.exports = createName

　　模板頁引入：<wxs src="tool.wxs" module="tool"></wxs>

　　使用：<view wx:for="tool('1,2,3,4')">{{item}}</view>

　　九、更新頁面data資料

　　登入後複製

　　data:{

　　number:1

　　}

　　onTap(){

　　this.data.number = 2;  //錯誤

　　this.setData({

　　number:2;  //正確

　　})

　　}

　　總結：使用setData可以更改data裡面的資料（同步更新），然後檢視也會更新（非同步更新）

　　不是更改一個data，檢視就馬上更新，而且確定data不會更改之後，將所有更改的data一次性渲染到檢視（儘管是非同步更新，時間間隔仍然很短）

　　十、元件

　　頁面由元件組成

　　view、text就是一個元件，只不過沒有樣式

　　看文件學習微信小程式內建元件

　　https://developers.weixin.qq.com/miniprogram/dev/component/

　　十一、自定義元件

　　舉例說明：新建magicNumber.元件

　　首先：建立magicNumber.資料夾，裡面建立magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json檔案

　　登入後複製

　　magicNumber.wxml檔案：

　　<view class="pressBtn" id="view" data-name="容器">

　　{{nowIn}}

　　<view>{{magicNumber}}</view>

　　<text id="text" data-name="文字" bind:tap="onTap">點選顯示magicNumber值</text>

　　</view>

　　magicNumber.json檔案：

　　{

　　"component":true

　　}

　　magicNumber.js檔案：

　　這裡是註冊元件，不是註冊頁面，所以不能是Page({})，而是：

　　Component({

　　properties:{

　　nowIn:String

　　},

　　data:{

　　magicNumber:Math.random(),

　　},

　　attached(){  //預設一上來就觸發一次getMagicNumber事件，這樣父元件監聽到觸發了，也會馬上觸發他的getMagicNumberHandle事件，所以一上來就預設更新了

　　this.triggerEvent('getMagicNumber',this.data.magicNumber)

　　},

　　methods:{  //子元件的事件寫在methods裡面

　　onTap(event){

　　this.setData({

　　magicNumber:Math.random()

　　})

　　this.triggerEvent('getMagicNumber',this.data.magicNumber)  //第二個引數是傳到父元件的值

　　//子元件向父元件傳值，透過自定義事件，使用triggerEvent，告知父元件，該修改某個值了，點選的時候，傳達一些資訊過去，這裡傳過去this.data.magicNumber這個值，也可以傳遞物件過去，作為第二個引數

　　console.log(event.currentTarget.dataset.name)  //獲取到data-name="文字"裡面的"文字"

　　}

　　}

　　})

　　元件註冊完畢，接下來是在某個頁面進行使用

　　假如在index頁面使用，首先在index資料夾下面建立index.json檔案，裡面配置：

　　登入後複製

　　{

　　"usingComponents": {

　　"magic-number":"/pages/magicNumber/magicNumber"

　　}

　　}

　　使用：index.wxml

　　登入後複製

　　<view class="container">

　　<magic-number  now-in="首頁" bind:getMagicNumber="getMagicNumberHandle"></magic-number>

　　<view>{{num}}</view>

　　</view>

　　index.js

　　Page({

　　data:{

　　num:Math.floor(maN*1000)

　　},

　　getMagicNumberHandle(event){  //監聽子元件的getMagicNumber事件，一旦觸發了，馬上做出回應

　　console.log(event.detail);  傳過來的資訊可以透過【事件物件】event.detail獲取到

　　this.setData({

　　num:Math.floor(event.detail*1000)  //這裡就是處理了從子元件拿到的值

　　})

　　}

　　})

　　十二、路由

　　兩種方式實現導航的跳轉

　　1、navigator內建導航元件

　　url：要跳轉的頁面地址

　　open-type：跳轉方式，有5種方式

　　navigate：預設跳轉方式

　　redirect：重定向

　　switchTab：跳到某個tab

　　navigateBack：回退

　　reLaunch：重載入

　　頁面切換，open-type="navigate"

　　index.html

　　登入後複製

　　<view>

　　<navigator url="/pages/about/about" open-type="navigate">About</navigator>

　　<navigator url="/pages/movie/movie" open-type="navigate">Movie</navigator>

　　<navigator url="/pages/logs/logs" open-type="switchTab">Logs</navigator>  //tab切換

　　<navigator open-type="navigateBack">回退</navigator>  //回退到上一個頁面

　　<navigator url="/pages/movie/movie" open-type="redirect">重定向到Movie</navigator> 上方有回退按鈕

　　<navigator url="/pages/movie/movie" open-type="reLaunch">reLaunch</navigator> 上方沒有回退按鈕

　　</view>

　　★logs屬於底部tab，不可使用navigate跳轉，只能使用下面的tab切換進行跳轉

　　2、api跳轉

　　wx.navigateTo(object) 跳轉到

　　wx.redirectTo(object) 重定向

　　wx.switchTab(object) 跳到某個tab

　　wx.navigateBack(object) 回退

　　wx.reLaunch(object) 重載入

　　登入後複製

　　about.wxml

　　<view bind:tap="goMovie">使用api跳轉到movie</view>

　　about.js

　　Page({

　　goMovie(){

　　wx.navigateTo({

　　url:'/pages/movie/movie'

　　})

　　}

　　})

　　十三、授權與使用者資訊授權

　　獲取使用者暱稱、性別，頭像等等，需要在頁面上先放置一個button，即授權button，使用者點選確認之後才可以獲取使用者資訊

　　1、透過按鈕來獲取使用者資訊

　　<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">獲取使用者資訊</button>

　　如果開始使用者沒有點選授權，會彈出一個彈框，使用者可以選擇授權或者不授權，點選授權，透過回撥函式onGetUserInfo，裡面有事件物件event，可以獲取到使用者的資訊

　　2、透過普通點選事件獲取

　　在使用者未授權過的情況下呼叫此介面，將不再出現授權彈窗，會直接進入 fail 回撥。在使用者已授權的情況下呼叫此介面，可成功獲取使用者資訊。所以，最好先使用button來獲取使用者資訊

　　登入後複製

　　<button bind:tap="getUserInfo">獲取使用者資訊</button>

　　getUserInfo(ev){

　　wx.getUserInfo({

　　success:(msg)=>{

　　console.log(msg)

　　},

　　fail:(err)=>{

　　console.log(err)

　　}

　　})

　　}

　　★透過普通點選事件獲取使用者api，不會出現提醒授權彈框

　　獲取其他資訊，如位置等等的，需要先調取wx.authorize(object)的api，獲取使用者的授權， 然後再呼叫相關的api，直接獲取資訊，未授權先進行授權

　　微信小程式開發教程

　　案例：獲取使用者地理位置

　　登入後複製

　　<button bind:tap="getAuthorize">授權位置</button>  //這時候，僅僅是得到使用者授權可以獲取地理位置，具體的資訊還一無所知，需要透過其他的api來獲取最終的位置資訊

　　getAuthorize(){

　　wx.authorize({

　　scope:'scope.userLocation',

　　success:(msg)=>{

　　console.log(msg)

　　},

　　fail:(error)=>{

　　console.log(error)

　　}

　　})

　　}

　　<button bind:tap="getLocation">獲取位置資訊</button>

　　getLocation(){

　　wx.getLocation({

　　success:(msg)=>{

　　console.log(msg)

　　},

　　fail:(error)=>{

　　console.log(error)

　　}

　　})

　　}

　　<button bind:tap="getSetting">獲取授權資訊</button>  //檢視哪些使用者資訊已經授權可以使用

　　getSetting(){

　　wx.getsetting({

　　success:(msg)=>{

　　console.log(msg,'授權相關資訊')

　　}

　　})

　　}

　　<button bind:tap="openSetting">開啟授權資訊皮膚</button>  //使用者第一次拒絕授權地理位置等資訊，

　　//後續授權確認彈框將不再出現，這裡可以手動開啟授權資訊皮膚，如圖所示，使用者手動設定完成之後回退回去，會執行下面的方法

　　openSetting(){

　　wx.opensetting({

　　success:(msg)=>{

　　console.log(msg,'設定相關資訊完成')

　　}

　　})

　　}

　　微信小程式開發教程

　　十四、使用快取

　　在movie頁面快取資料

　　使用快取，多個頁面從而可以共享一些資料，但是使用起來需要慎重

　　非同步快取資料：

　　登入後複製

　　<button bind:tap="onCache">快取資料</button>

　　wx.setStorage({

　　key:'name',  //快取資料的鍵名

　　data:{  //可以是字串或者物件

　　p1:'lin'

　　},

　　success:()=>{  //有回撥函式，成功的時候才執行

　　console.log('儲存名字成功');

　　wx.getStorage({  //獲取快取，可以同步或者非同步

　　key:'name',

　　success:(data)=>{

　　console.log(data)

　　}

　　})

　　}

　　})

　　}

　　同步快取資料：

　　登入後複製

　　wx.setStorageSync('names','kate');

　　let names = wx.getStorageSync('names');

　　console.log(names);

　　在about頁面獲取快取資料，同步獲取快取資料

　　登入後複製

　　{{name}}

　　<button bind:tap="getName">獲取name</button>

　　Page({

　　data:{

　　name:''

　　},

　　getName(){

　　let n = wx.getStorageSync('name');

　　console.log(n);

　　if(n){

　　this.setData({

　　name:n.p1

　　})

　　}

　　}

　　})

　　移除快取的資料，同步移除

　　<button bind:tap="removeName">移除快取的name</button>

　　removeName(){

　　wx.removeStorageSync('names');

　　}

　　十五、請求與反饋，類似ajax，axios

　　登入後複製

　　<view bind:tap = "goRequest"></view>

　　goRequest(){

　　wx.showLoading({ //一個loading動畫，請求成功了會消失，下面已經定義了

　　title:'請求中'

　　});

　　wx.request({

　　url:''

　　data:{  //給伺服器傳遞請求資料

　　name:‘joe’

　　},

　　methods:'post',  //預設是get請求

　　success:(res)=>{

　　console.log(res.data);

　　//請求成功的反饋

　　wx.showToast({

　　title:'請求已經成功'

　　})

　　//請求成功隱藏loading

　　wx.hideLoading();

　　},

　　fail:(e)=>{

　　wx.showToast({

　　title:e.errMsg

　　})

　　}

　　})

　　}

　　★詳情-不校驗域名合法域名

　　十六、微信小程式線上環境搭建

　　微信小程式開發教程

　　1、註冊並且登入騰訊雲-解決方案-微信小程式-關聯賬號

　　2、上傳程式碼

　　微信小程式開發教程

　　微信小程式開發教程

　　【總結】：

　　父元件向子元件傳值，透過properties傳值

　　子元件向父元件傳值，透過自定義事件，使用triggerEvent，告知父元件，該修改某個值了，點選的時候，傳達一些資訊過去，這裡傳過去this.data.magicNumber這個值，也可以傳遞物件過去，作為第二個引數