微信小程序開發教程

一、開發前準備
申請賬號、安裝開發者工具
二、文件與目錄結構
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:''www.baidu.com,
            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這個值，也可以傳遞對象過去，作為第二個參數

零碎知識點
1、對象被轉為字符串就變成了[ object object ]
2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".
一直顯示這個，因為把methods寫在了data{}里面，作死！！

3、微信開發者工具：清緩存可以清除用戶登錄信息