一、開發(fā)前準(zhǔn)備
申請賬號、安裝開發(fā)者工具
二、文件與目錄結(jié)構(gòu)
1、程序主體：
app.js
app.json 程序配置
1.1、程序配置

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)平頂山,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

pages 頁面路徑
    window 頁面的窗口表現(xiàn)
     tabBar 底部tab切換
     networkTimeout
     debug
        {
                 "pages":[  //哪個寫在上面，哪個就是入口文件
                        "pages/index/index",
                        "pages/movie/movie",
                        "pages/logs/logs"
                 ]
        }

app.wxss 公共樣式
2、頁面：
index.js
index.json 頁面配置
2.1、頁面配置
window 頁面的窗口表現(xiàn)
index.wxss 頁面樣式
index.wxml 頁面結(jié)構(gòu)
三、注冊程序與頁面
1、注冊app，只需要注冊一次，可以得到一個程序的實例，可以被其他頁面訪問
在其他頁面，通過getApp全局函數(shù)獲取應(yīng)用實例 const app = getApp(); 獲取全局?jǐn)?shù)據(jù)：app.gldData; //{a:1}

App({
    gldData:{ a:1 },
    onLaunch:function(){  //一運行小程序就會執(zhí)行
        //初始化代碼
    }
})
2、注冊page，有幾個頁面，在每個頁面內(nèi)都需要注冊
Page({
    data:{
        b:2
    },
    onLoad:function(){   //一進(jìn)入頁面就會執(zhí)行
        console.log( this.data )  //{b:2}  通過this，獲取單個頁面內(nèi)數(shù)據(jù)
    }
})

四、程序生命周期
1、App

App({

  //在小程序運行期間，只會執(zhí)行一次
    //程序銷毀之后(過了一段時間沒有運行或者手動刪除小程序)，再次啟動小程序就會執(zhí)行
    onLaunch(){
        console.log('小程序啟動時執(zhí)行')
    },
    //每次從后臺切換出來就會執(zhí)行
    onShow(){
        console.log('切換到小程序時執(zhí)行')
    },
    //每次切換到后臺就會執(zhí)行
    onHide(){
        console.log('小程序被隱藏在后臺時執(zhí)行')
    }
})

2、Page

Page({
    //tab之間的切換，不會讓頁面重新加載，也不會卸載，只會讓頁面顯示與隱藏
    //在進(jìn)行NavigatorTo鏈接跳轉(zhuǎn)的時候，目標(biāo)頁面會被加載onLoad，原始頁面會被隱藏onHide
    //此時點擊導(dǎo)航條上的回退按鈕NavigatorBack，目標(biāo)頁面會onShow，不會onLoad，原始頁面會被卸載onUnload

    //頁面加載的時候執(zhí)行，只會執(zhí)行一次
    onLoad(){   },
    //頁面第一次渲染完成之后執(zhí)行，只會執(zhí)行一次
    onReady(){  },
    //頁面顯示就會執(zhí)行，會執(zhí)行多次，比如tab切換從a頁面切換到b頁面，那么也就是等于b頁面顯示了
    onShow(){   },
    //頁面隱藏就會執(zhí)行，會執(zhí)行多次，比如tab切換從a頁面切換到b頁面，那么也就是等于a頁面隱藏了
    onHide(){   },
    //頁面卸載的時候執(zhí)行，只會執(zhí)行一次
    onUnload(){ },
})

五、數(shù)據(jù)與列表渲染
1、數(shù)據(jù)在index.js里面的data里面定義，

Page({
    data:{ //數(shù)據(jù)類型，可以是字符串、數(shù)組、對象、數(shù)值等等
        name:'kate'
    }
})
要輸出到頁面上，直接就是{{name}}即可

2、渲染數(shù)組 wx:for wx:key

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3']
    }
})
{{item}}

3、條件渲染 變量為true，即滿足條件就進(jìn)行渲染，反之就不進(jìn)行渲染

等級B 
等級C
等級A

4、塊級渲染block，block是虛擬組件，不會出現(xiàn)在頁面上
同時顯示多個元素

    {{ name }}
    {{ score }}
    等級A


    {{ name }}
    {{ score }}
    等級B

5、使用模板

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3'],
    score:80,
    name:'aaa'
    }
})
先定義模板：


 

 

使用：

    
    
     //data="{{name,score}}等價于data="{{name:name , score:score}}

6、import與include
可以把模板定義在專門的template.wxml里面
要使用里面的模板，只需要在對應(yīng)的wxml里面
//import引入的模板，你需要在頁面上告知使用的是哪一個模板，
//include引入模板，在頁面上什么位置寫上，那么模板代碼就在什么地方顯示

六、事件
綁定事件

    點擊

tabHandle(event){
    //event：是事件對象，里面有detail等屬性
    //target：事件從哪里觸發(fā)的
    //currentTarget：事件在哪個上面執(zhí)行的，通過event.currentTarget.dataset.name可以獲取到到"容器"這個自定義值
    //比如點擊text，那么target就是text，currentTarget是外面的view，因為冒泡了，所以盡管點擊text，tabHandle事件仍然會觸發(fā)
}
如果要阻止事件冒泡，那么就使用catch，而不是bind，如：

    點擊

這樣點擊text，tabHandle事件仍然會觸發(fā)，但是view上一級就不會冒泡上去了，因為阻止冒泡了
七、樣式wxss
尺寸單位：rpx，只要設(shè)置寬度為750rpx，那么不管在什么手機(jī)上都是占滿一整個屏幕
引入樣式：@import '../style.wxss'
全局樣式與局部樣式：定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器。
八、微信小程序腳本語言wxs
不支持es6的語法，就當(dāng)成es5的javascript

定義(寫在模板頁面內(nèi))：
  
    function createName(names){
        return names.split(',')
    }
    module.exports = createName
    //tool就表示導(dǎo)出的函數(shù)createName

使用：
{{item}}

也可以將wxs代碼寫在一個單獨的.wxs文件內(nèi)，然后引入這個文件，類似于js
tool.wxs
function createName(names){
        return names.split(',')
    }
module.exports = createName
模板頁引入：
使用：{{item}}

九、更新頁面data數(shù)據(jù)

data:{
    number:1
}
onTap(){
    this.data.number = 2;  //錯誤
    this.setData({
        number:2;  //正確
    })
}

總結(jié)：使用setData可以更改data里面的數(shù)據(jù)（同步更新），然后視圖也會更新（異步更新）
不是更改一個data，視圖就馬上更新，而且確定data不會更改之后，將所有更改的data一次性渲染到視圖（盡管是異步更新，時間間隔仍然很短）

十、組件
頁面由組件組成
view、text就是一個組件，只不過沒有樣式
看文檔學(xué)習(xí)微信小程序內(nèi)置組件
https://developers.weixin.qq.com/miniprogram/dev/component/

十一、自定義組件
舉例說明：新建magicNumber.組件
首先：創(chuàng)建magicNumber.文件夾，里面創(chuàng)建magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json文件

magicNumber.wxml文件：

        {{nowIn}}
    {{magicNumber}}
    點擊顯示magicNumber值

magicNumber.json文件：
{
    "component":true
}
magicNumber.js文件：
這里是注冊組件，不是注冊頁面，所以不能是Page({})，而是：
Component({
    properties:{
        nowIn:String
    },
    data:{
        magicNumber:Math.random(),
    },
    attached(){  //默認(rèn)一上來就觸發(fā)一次getMagicNumber事件，這樣父組件監(jiān)聽到觸發(fā)了，也會馬上觸發(fā)他的getMagicNumberHandle事件，所以一上來就默認(rèn)更新了
        this.triggerEvent('getMagicNumber',this.data.magicNumber)
    },
    methods:{  //子組件的事件寫在methods里面
        onTap(event){
            this.setData({
                magicNumber:Math.random()
            })
            this.triggerEvent('getMagicNumber',this.data.magicNumber)  //第二個參數(shù)是傳到父組件的值
            //子組件向父組件傳值，通過自定義事件，使用triggerEvent，告知父組件，該修改某個值了，點擊的時候，傳達(dá)一些信息過去，這里傳過去this.data.magicNumber這個值，也可以傳遞對象過去，作為第二個參數(shù)
            console.log(event.currentTarget.dataset.name)  //獲取到data-name="文字"里面的"文字"
        }
    }
})

組件注冊完畢，接下來是在某個頁面進(jìn)行使用
假如在index頁面使用，首先在index文件夾下面創(chuàng)建index.json文件，里面配置：

{
  "usingComponents": {
    "magic-number":"/pages/magicNumber/magicNumber"
  }
}
使用：index.wxml

  
  {{num}}

index.js
Page({
    data:{
        num:Math.floor(maN*1000)
    },
    getMagicNumberHandle(event){  //監(jiān)聽子組件的getMagicNumber事件，一旦觸發(fā)了，馬上做出回應(yīng)
                console.log(event.detail);  傳過來的信息可以通過【事件對象】event.detail獲取到
                this.setData({
                    num:Math.floor(event.detail*1000)  //這里就是處理了從子組件拿到的值
                })
        }
})

十二、路由
兩種方式實現(xiàn)導(dǎo)航的跳轉(zhuǎn)
1、navigator內(nèi)置導(dǎo)航組件
url：要跳轉(zhuǎn)的頁面地址
open-type：跳轉(zhuǎn)方式，有5種方式
navigate：默認(rèn)跳轉(zhuǎn)方式
redirect：重定向
switchTab：跳到某個tab
navigateBack：回退
reLaunch：重加載

• 頁面切換，open-type="navigate"
  index.html

  
  About
  Movie  
  Logs  //tab切換
  回退  //回退到上一個頁面
  重定向到Movie 上方有回退按鈕
  reLaunch 上方?jīng)]有回退按鈕
  

  ★logs屬于底部tab，不可使用navigate跳轉(zhuǎn)，只能使用下面的tab切換進(jìn)行跳轉(zhuǎn)

2、api跳轉(zhuǎn)
wx.navigateTo(object) 跳轉(zhuǎn)到
wx.redirectTo(object) 重定向
wx.switchTab(object) 跳到某個tab
wx.navigateBack(object) 回退
wx.reLaunch(object) 重加載

about.wxml
使用api跳轉(zhuǎn)到movie
about.js
Page({
    goMovie(){
       wx.navigateTo({
            url:'/pages/movie/movie'
        })
    }
})

十三、授權(quán)與用戶信息授權(quán)

• 獲取用戶昵稱、性別，頭像等等，需要在頁面上先放置一個button，即授權(quán)button，用戶點擊確認(rèn)之后才可以獲取用戶信息
  1、通過按鈕來獲取用戶信息
  獲取用戶信息
  如果開始用戶沒有點擊授權(quán)，會彈出一個彈框，用戶可以選擇授權(quán)或者不授權(quán)，點擊授權(quán)，通過回調(diào)函數(shù)onGetUserInfo，里面有事件對象event，可以獲取到用戶的信息

2、通過普通點擊事件獲取
在用戶未授權(quán)過的情況下調(diào)用此接口，將不再出現(xiàn)授權(quán)彈窗，會直接進(jìn)入 fail 回調(diào)。在用戶已授權(quán)的情況下調(diào)用此接口，可成功獲取用戶信息。所以，最好先使用button來獲取用戶信息

獲取用戶信息
getUserInfo(ev){
   wx.getUserInfo({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(err)=>{
            console.log(err)
        }
    })
  }

★通過普通點擊事件獲取用戶api，不會出現(xiàn)提醒授權(quán)彈框

• 獲取其他信息，如位置等等的，需要先調(diào)取wx.authorize(object)的api，獲取用戶的授權(quán)， 然后再調(diào)用相關(guān)的api，直接獲取信息，未授權(quán)先進(jìn)行授權(quán)
  

案例：獲取用戶地理位置

授權(quán)位置  //這時候，僅僅是得到用戶授權(quán)可以獲取地理位置，具體的信息還一無所知，需要通過其他的api來獲取最終的位置信息
getAuthorize(){
   wx.authorize({
        scope:'scope.userLocation',
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }
獲取位置信息
getLocation(){
   wx.getLocation({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }
    獲取授權(quán)信息  //查看哪些用戶信息已經(jīng)授權(quán)可以使用
    getSetting(){
       wx.getsetting({
            success:(msg)=>{
            console.log(msg,'授權(quán)相關(guān)信息')
        }
        })
    }
    打開授權(quán)信息面板  //用戶第一次拒絕授權(quán)地理位置等信息，
    //后續(xù)授權(quán)確認(rèn)彈框?qū)⒉辉俪霈F(xiàn)，這里可以手動打開授權(quán)信息面板，如圖所示，用戶手動設(shè)置完成之后回退回去，會執(zhí)行下面的方法
    openSetting(){
       wx.opensetting({
            success:(msg)=>{
            console.log(msg,'設(shè)置相關(guān)信息完成')
        }
        })
    }

十四、使用緩存
在movie頁面緩存數(shù)據(jù)
使用緩存，多個頁面從而可以共享一些數(shù)據(jù)，但是使用起來需要慎重
異步緩存數(shù)據(jù)：

緩存數(shù)據(jù)
   wx.setStorage({
            key:'name',  //緩存數(shù)據(jù)的鍵名
            data:{  //可以是字符串或者對象
                p1:'lin'
            },
            success:()=>{  //有回調(diào)函數(shù)，成功的時候才執(zhí)行
                console.log('存儲名字成功');
               wx.getStorage({  //獲取緩存，可以同步或者異步
                    key:'name',
                    success:(data)=>{
                        console.log(data)
                    }
                })
            }
        })
    }

同步緩存數(shù)據(jù)：

wx.setStorageSync('names','kate');
let names = wx.getStorageSync('names');
console.log(names);

在about頁面獲取緩存數(shù)據(jù)，同步獲取緩存數(shù)據(jù)

{{name}}
獲取name
Page({
    data:{
        name:''
    },
    getName(){
        let n = wx.getStorageSync('name');
        console.log(n);
        if(n){
            this.setData({
                name:n.p1
            })
        }
    }
})

移除緩存的數(shù)據(jù)，同步移除
移除緩存的name
removeName(){
wx.removeStorageSync('names');
}

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

goRequest(){
       wx.showLoading({ //一個loading動畫，請求成功了會消失，下面已經(jīng)定義了
            title:'請求中'
        });
       wx.request({
            url:''www.baidu.com,
            data:{  //給服務(wù)器傳遞請求數(shù)據(jù)
                name:‘joe’
            },
            methods:'post',  //默認(rèn)是get請求
            success:(res)=>{
                console.log(res.data);
                //請求成功的反饋
               wx.showToast({
                    title:'請求已經(jīng)成功'
                })
                //請求成功隱藏loading
               wx.hideLoading();
            },
            fail:(e)=>{
               wx.showToast({
                    title:e.errMsg
                })
            }
        })
    }

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

十六、微信小程序線上環(huán)境搭建

1、注冊并且登錄騰訊云-解決方案-微信小程序-關(guān)聯(lián)賬號
2、上傳代碼

【總結(jié)】：
父組件向子組件傳值，通過properties傳值
子組件向父組件傳值，通過自定義事件，使用triggerEvent，告知父組件，該修改某個值了，點擊的時候，傳達(dá)一些信息過去，這里傳過去this.data.magicNumber這個值，也可以傳遞對象過去，作為第二個參數(shù)

零碎知識點
1、對象被轉(zhuǎn)為字符串就變成了[ object object ]
2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".
一直顯示這個，因為把methods寫在了data{}里面，作死?。?br/>
3、微信開發(fā)者工具：清緩存可以清除用戶登錄信息

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：微信小程序開發(fā)教程-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/cocogo.html