摘要：，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒(méi)有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過(guò)程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來(lái)共同學(xué)習(xí)與進(jìn)步

微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國(guó)內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因?yàn)樗膫涫軞g迎度以及越來(lái)越被企業(yè)所重視，也就形成了咱們開發(fā)人員對(duì)小程序的開發(fā)的掌握；具體它的熱度這里就不多扯了，而咱重點(diǎn)關(guān)心的是開發(fā)細(xì)節(jié)。所以今天咱們就一步一步的剖析和認(rèn)識(shí)一下這個(gè)小程序：
一 、開發(fā)準(zhǔn)備工作

1、首先登錄微信公眾平臺(tái) https://mp.weixin.qq.com ，選擇小程序( 沒(méi)有注冊(cè)過(guò)的需要向注冊(cè)一下公眾號(hào) ), 登錄后

“設(shè)置”-“開發(fā)者設(shè)置”中，查看微信小程序的 AppID

  注：不可直接使用服務(wù)號(hào)或訂閱號(hào)的AppID   

2、下載開發(fā)工具

  下載地址：     https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869
  

3、新建項(xiàng)目

  打開并使用微信掃碼登錄
   選擇創(chuàng)建“小程序項(xiàng)目”
   選擇一個(gè)要?jiǎng)?chuàng)建項(xiàng)目的文件夾(空文件夾)
   輸入獲取到的 AppID(可以選擇不填，但這樣會(huì)有很多功能受限制)
   輸入你的項(xiàng)目名

二、編輯器架構(gòu)布局理解

 準(zhǔn)備就緒后，進(jìn)入編輯器進(jìn)行項(xiàng)目編輯。

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。

.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件,就相當(dāng)于html中的css文件，

.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。

app.js是頁(yè)面全局功能js，可以在pages里的項(xiàng)目中調(diào)用全局?jǐn)?shù)據(jù)（gloableData）及其頁(yè)面方法.
app.wxss里的樣式為頁(yè)面全局樣式，但其優(yōu)先級(jí)沒(méi)有局部頁(yè)面定義的優(yōu)先級(jí)高。

app.json文件windows的設(shè)置項(xiàng)一樣為全局設(shè)置,pages數(shù)組定義新的頁(yè)面，排前面的為進(jìn)入小程序的展示頁(yè)，如下app.json為：

{
     [

      "pages/index",  //放在了前面

      "pages/logs"

     ]
}

三、開發(fā)常用組件及標(biāo)簽分享

微信小程序編輯只能用其自己提供的標(biāo)簽；
view,block標(biāo)簽為塊級(jí)元素類似div,text標(biāo)簽為行級(jí)元素類似span，這三個(gè)標(biāo)簽用的最頻繁。
表單元素除了H5里的input、button外有新增了像switch、slider、picker,具體詳情使用可以看組件api。
頁(yè)面跳轉(zhuǎn)標(biāo)簽navigator用于項(xiàng)目頁(yè)面之間的跳轉(zhuǎn)，但不是a鏈接因?yàn)樗荒芡W(wǎng)頁(yè)頁(yè)面跳轉(zhuǎn)（跳轉(zhuǎn)用的是webview標(biāo)簽）
eg: 跳轉(zhuǎn)到新頁(yè)面
但項(xiàng)目中我更多的是使用事件點(diǎn)擊跳轉(zhuǎn)，好處是跳轉(zhuǎn)之前好做判斷

eg:      wx.navigateTo({
                  url:"pages/index?title=navigate"
           })

還有一個(gè)常用的標(biāo)簽是圖片標(biāo)簽，與h5里的不同之處是小程序里的圖片標(biāo)簽是全拼image,并且是雙標(biāo)簽

四、開發(fā)常用指令及事件分享

和vue的設(shè)計(jì)模式一樣MVVM 數(shù)據(jù)渲染{{ data}}
判斷 wx:if，wx:else。eg:
循環(huán)wx:for.
小程序事件綁定 bindtap 、catchtap
獲取循環(huán)序號(hào) data-x

    選擇
    {{item}}
 

//對(duì)應(yīng)的js中
 data:{
     showBtn:true,
     arrList:["apple","pear","orange"]
  },
  choose(){ //選擇按鈕catchtap的choose事件,catchtap是指點(diǎn)擊事件會(huì)阻止向上冒泡
     this.setData({ //改變data中的showBtn的值
          showBtn:false
      })
   },
   selectTab(ev){ //列表上bindtap的selectTab事件,bindtap是指點(diǎn)擊事件，但不會(huì)阻止向上冒泡
       var getAttrType=ev.target.dataset.type;//上面的列表標(biāo)簽里寫了data-type，這里就是取到對(duì)應(yīng)上面等于的值
       var index=ev.target.dataset.i;//同樣的，上面的列表標(biāo)簽里寫了data-i，這里就是取到對(duì)應(yīng)上面等于的值
    }
  onLoad(){//頁(yè)面加載時(shí)
 
   },
  onShow(){//頁(yè)面顯示時(shí)
 
  } 

五、本地圖片選擇、文件上傳及服務(wù)端數(shù)據(jù)交互及文件處理

    本地圖片選擇wx.chooseImage(OBJECT)
    圖片預(yù)覽wx.previewImage(OBJECT)

    文件上傳 wx.uploadFile(OBJECT)

    數(shù)據(jù)請(qǐng)求 wx.request()

六、本地?cái)?shù)據(jù)存儲(chǔ)操作

   wx.setStorageSync
   wx.getStorageSync
   wx.clearStorageSync

//對(duì)應(yīng)的本地圖片選擇js
 
wx.chooseImage({
    count: 3, // 默認(rèn)9,假如傳張
    sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
    sourceType: ["album", "camera"], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
    success: function (res) {
          // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths    
        wx.previewImage({  //對(duì)應(yīng)的圖片預(yù)覽
          current: temFilePaths[0], // 當(dāng)前顯示圖片的鏈接
          urls: tempFilePaths||[] // 需要預(yù)覽的圖片http鏈接列表
        })
       wx.uploadFile({ //對(duì)應(yīng)的圖片上傳
           url: "http://example.weixin.qq.com/upload", //僅為示例，非真實(shí)的接口地址
           filePath: tempFilePaths[0],
           name:"file",
           formData:{ //上傳的同時(shí)攜帶別的參數(shù)
              "user":"test"
           }
        success: function(res){
           var data = res.data
            //do something
       }
    })
  }
})

//數(shù)據(jù)請(qǐng)求js
wx.request({
  url: "test.php", //僅為示例，并非真實(shí)的接口地址
  data: {  //注意你在這里上傳圖片url參數(shù)到后臺(tái)后臺(tái)是接收不到的，因?yàn)樯厦嬗袑ｉT上傳圖片的方法
     params1: "" ,
     params2: ""
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     console.log(res.data)
  }
})

//數(shù)據(jù)儲(chǔ)存js
wx.setStorageSync("key","value") //設(shè)置要本地存儲(chǔ)的key值
wx.getStorageSync("key")  //獲取本地存儲(chǔ)的key
wx.clearStorageSync("key")  //上出本地存儲(chǔ)的key

wepy框架安裝及使用介紹

鏈接地址 https://tencent.github.io/wep...

全局安裝或更新WePY命令行工具 npm install wepy-cli -g
在開發(fā)目錄中生成Demo開發(fā)項(xiàng)目  wepy init standard myproject
接下來(lái)三步驟與vue一樣  
cd myproject
npm  install
wepy build --watch（啟動(dòng)項(xiàng)目）
使用WePY框架后的開發(fā)目錄結(jié)構(gòu)(主要為src目錄的結(jié)構(gòu)，dist目錄除外)

組件名后綴 .wpy 

組件頁(yè)面結(jié)構(gòu)與vue結(jié)構(gòu)一樣

一、wepy頁(yè)面及組件結(jié)構(gòu)介紹

wepy頁(yè)面及組件編輯布局都是同樣的三結(jié)構(gòu)

   template模板
   script腳本
   style 樣式（也可以外部引入）

page頁(yè)面實(shí)例 export default class MyPage extends wepy.page { }

  注：page組件需在入口模板app.wpy的pages數(shù)組里注冊(cè)后方可進(jìn)行頁(yè)面間跳轉(zhuǎn)

Component組件實(shí)例 export default class MyPage extends wepy.component { }

方法的定義 頁(yè)面wxml標(biāo)簽的bind、catch事件只能定義在WePY中的methods屬性里

組件的引用 注意引用路徑 components里注冊(cè) 模板里使用

循環(huán)組件 repeat

看一下app.wpy里的頁(yè)面組件注冊(cè)

二、wepy頁(yè)面組件之間傳值與通信

wepy組件之間的通信與傳值有三種方式：
父組件=>子組件 (props,$broadcast)，頁(yè)面events對(duì)象為中轉(zhuǎn)
子組件=>父組件 ($emit,$invoke) ，頁(yè)面events對(duì)象為中轉(zhuǎn)
子組件=>子組件 ( $invoke) ，非methods里的方法為中轉(zhuǎn)，同樣適用與父組件傳向子組件

    eg：this.$broadcast("parentData",{getData:"aaa"})
       this.$emit(sendChildData,{ getData:"aaa" })
       this.$invoke("Footer","FooterMethod",{invokeData:"aaa"})

props方法和vueJS中的props一樣，不過(guò)這里分為靜態(tài)傳值與動(dòng)態(tài)傳值

 
// child.wpy，靜態(tài)傳值
props = {
    title: String
};
 
onLoad () {
    console.log(this.title); // mytitle
}

props動(dòng)態(tài)傳值是指父組件向子組件傳遞動(dòng)態(tài)數(shù)據(jù)內(nèi)容，父子組件數(shù)據(jù)完全獨(dú)立互不干擾。但可以通過(guò)使用.sync修飾符來(lái)達(dá)到父組件數(shù)據(jù)綁定至子組件的效果，也可以通過(guò)設(shè)置子組件props的twoWay: true來(lái)達(dá)到子組件數(shù)據(jù)綁定至父組件的效果。那如果既使用.sync修飾符，同時(shí)子組件props中添加的twoWay: true時(shí)，就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了。

注意：下文示例中的twoWay為true時(shí)，表示子組件向父組件單向動(dòng)態(tài)傳值，而twoWay為false(默認(rèn)值，可不寫)時(shí)，則表示子組件不向父組件傳值。這是與Vue不一致的地方，而這里之所以仍然使用twoWay，只是為了盡可能保持與Vue在標(biāo)識(shí)符命名上的一致性。

// parent.wpy
 
 data = {
    parentTitle: "p-title"
 };
 
// child.wpy
props = {
    // 靜態(tài)傳值
    title: String,
    // 父向子單向動(dòng)態(tài)傳值
    syncTitle: {
        type: String,
        default: "null"
    },
    twoWayTitle: {
        type: String,
        default: "nothing",
        twoWay: true
    }
};
 
onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title
    this.title = "c-title";
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = "two-way-title";
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay為true時(shí)，子組件props中的屬性值改變時(shí)，會(huì)同時(shí)改變父組件對(duì)應(yīng)的值
    this.$parent.parentTitle = "p-title-changed";
    this.$parent.$apply();
    console.log(this.title); // "c-title";
    console.log(this.syncTitle); // "p-title-changed" --- 有.sync修飾符的props屬性值，當(dāng)在父組件中改變時(shí)，會(huì)同時(shí)改變子組件對(duì)應(yīng)的值。
}

OK，至此咱們的微信小程序的簡(jiǎn)單使用及了解算是分享完了，畢竟個(gè)人也是道行有限，沒(méi)有鉆研太深，這些只是本人在實(shí)際項(xiàng)目開發(fā)過(guò)程中用到和總結(jié)的經(jīng)驗(yàn)，有太多不足或不對(duì)的地方，希望大家多多給予指出與改正，咱們一起來(lái)共同學(xué)習(xí)與進(jìn)步！