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

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

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

“設置”-“開發者設置”中，查看微信小程序的 AppID

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

2、下載開發工具

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

3、新建項目

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

二、編輯器架構布局理解

 準備就緒后，進入編輯器進行項目編輯。

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

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

.wxml后綴的文件是頁面結構文件。

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

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

{
     [

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

      "pages/logs"

     ]
}

三、開發常用組件及標簽分享

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

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

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

四、開發常用指令及事件分享

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

    選擇
    {{item}}
 

//對應的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;//上面的列表標簽里寫了data-type，這里就是取到對應上面等于的值
       var index=ev.target.dataset.i;//同樣的，上面的列表標簽里寫了data-i，這里就是取到對應上面等于的值
    }
  onLoad(){//頁面加載時
 
   },
  onShow(){//頁面顯示時
 
  } 

五、本地圖片選擇、文件上傳及服務端數據交互及文件處理

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

    文件上傳 wx.uploadFile(OBJECT)

    數據請求 wx.request()

六、本地數據存儲操作

   wx.setStorageSync
   wx.getStorageSync
   wx.clearStorageSync

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

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

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

wepy框架安裝及使用介紹

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

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

組件名后綴 .wpy 

組件頁面結構與vue結構一樣

一、wepy頁面及組件結構介紹

wepy頁面及組件編輯布局都是同樣的三結構

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

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

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

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

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

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

循環組件 repeat

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

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

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

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

props方法和vueJS中的props一樣，不過這里分為靜態傳值與動態傳值

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

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

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

// parent.wpy
 
 data = {
    parentTitle: "p-title"
 };
 
// child.wpy
props = {
    // 靜態傳值
    title: String,
    // 父向子單向動態傳值
    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中的屬性值改變時，會同時改變父組件對應的值
    this.$parent.parentTitle = "p-title-changed";
    this.$parent.$apply();
    console.log(this.title); // "c-title";
    console.log(this.syncTitle); // "p-title-changed" --- 有.sync修飾符的props屬性值，當在父組件中改變時，會同時改變子組件對應的值。
}

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