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

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

1、首先登錄微信公眾平臺 https://mp.weixin.qq.com ，選擇小程序( 沒有注冊過的需要向注冊一下公眾號 ), 登錄后

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

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

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

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

3、新建項目

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

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

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

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

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

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

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

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

{
     [

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

      "pages/logs"

     ]
}

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

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

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

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

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

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

    選擇
    {{item}}
 

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

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

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

    文件上傳 wx.uploadFile(OBJECT)

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

六、本地數(shù)據(jù)存儲操作

   wx.setStorageSync
   wx.getStorageSync
   wx.clearStorageSync

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

//數(shù)據(jù)請求js
wx.request({
  url: "test.php", //僅為示例，并非真實的接口地址
  data: {  //注意你在這里上傳圖片url參數(shù)到后臺后臺是接收不到的，因為上面有專門上傳圖片的方法
     params1: "" ,
     params2: ""
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     console.log(res.data)
  }
})

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

wepy框架安裝及使用介紹

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

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

組件名后綴 .wpy 

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

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

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

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

page頁面實例 export default class MyPage extends wepy.page { }

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

Component組件實例 export default class MyPage extends wepy.component { }

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

組件的引用 注意引用路徑 components里注冊 模板里使用

循環(huán)組件 repeat

看一下app.wpy里的頁面組件注冊

二、wepy頁面組件之間傳值與通信

wepy組件之間的通信與傳值有三種方式：
父組件=>子組件 (props,$broadcast)，頁面events對象為中轉(zhuǎn)
子組件=>父組件 ($emit,$invoke) ，頁面events對象為中轉(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一樣，不過這里分為靜態(tài)傳值與動態(tài)傳值

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

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

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

// parent.wpy
 
 data = {
    parentTitle: "p-title"
 };
 
// child.wpy
props = {
    // 靜態(tài)傳值
    title: String,
    // 父向子單向動態(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時，子組件props中的屬性值改變時，會同時改變父組件對應(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)在父組件中改變時，會同時改變子組件對應(yīng)的值。
}

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