微信小程序學習與wepy框架的使用詳解

時間 2019-12-07

標籤微信程序學習 wepy 框架使用詳解简体版

原文原文鏈接

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

一、首先登陸微信公衆平臺 https://mp.weixin.qq.com ，選擇小程序( 沒有註冊過的須要向註冊一下公衆號 ), 登陸後css

「設置」-「開發者設置」中，查看微信小程序的 AppIDhtml

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

二、下載開發工具vue

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

三、新建項目git

打開並使用微信掃碼登陸
   選擇建立「小程序項目」
   選擇一個要建立項目的文件夾(空文件夾)
   輸入獲取到的 AppID(能夠選擇不填，但這樣會有不少功能受限制)
   輸入你的項目名

2、編輯器架構佈局理解github

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

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

.js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件,就至關於html中的css文件，npm

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

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

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

{
     [

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

      'pages/logs'

     ]
}

3、開發經常使用組件及標籤分享

微信小程序編輯只能用其本身提供的標籤；
view,block標籤爲塊級元素相似div,text標籤爲行級元素相似span，這三個標籤用的最頻繁。
表單元素除了H5裏的input、button外有新增了像switch、slider、picker,具體詳情使用能夠看組件api。
頁面跳轉標籤navigator用於項目頁面之間的跳轉，但不是a連接由於它不能往網頁頁面跳轉（跳轉用的是webview標籤<web-view src="https://www.baidu.com/"></web-view>）
eg: <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
但項目中我更多的是使用事件點擊跳轉，好處是跳轉以前好作判斷

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

還有一個經常使用的標籤是圖片標籤，與h5裏的不一樣之處是小程序裏的圖片標籤是全拼image,而且是雙標籤<image src="{{src}}"></image>

4、開發經常使用指令及事件分享

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

<!--在wxml中-->
<view class="contents">
    <button catchtap="choose" wx:if="{{showBtn}}">選擇</button>
    <text wx:for="{{arrList}}" wx:key="{{index}}" data-i="{{index}}" data-type="{{item}}" bindtap="selectTab" >{{item}}</text>
</view>

//對應的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(){//頁面顯示時
 
  }

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

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

    文件上傳 wx.uploadFile(OBJECT)

    數據請求 wx.request()

6、本地數據存儲操做

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結構同樣

1、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

<!--wepy結構-->
    <style type="scss">
    </style>
    <template>
        <button bindtap="showFirstComponent">按鈕</button>
        <view v-if="show">
         <DemoCom></DemoCom>   <!--使用組件-->
        </view>
       <repeat for="{{arr}}" key="index">  <!--循環組件-->
         <DemoCom :passdata="item" /> <!--傳值-->
       <repeat>
    </template> 
    <script>
      import wepy from 'wepy'
      import DemoComponent from '../components/demoComponent' //好比說這裏經過路徑引人了demoComponent組件
      export default class pageDemo extends wepy.page {
     
        config = {
               'navigationBarTitleText': '頁面標題',
               'navigationBarTextStyle': '#FFFFFF', //頭部背景色
               'navigationBarBackgroundColor': '#0386FF' //頭部字體顏色
             };
        components = { //註冊引入的組件
               DemoCom:DemoComponent
            };
        data = {     
            show:true,
            arr:[
                {name:'aa',age:'16'},
                {name:'bb',age:'17'},
                {name:'cc',age:'c18'}
              ]
        };
     
        methods = {
          showFirstComponent(){ //bindtap裏面的事件
                this.show=!this.show; //在這裏data數據的設置、獲取與vueJS裏面的設置、獲取同樣
           }
        };
        onLoad(){
     
        };
        onShow(){
     
        }
    </script>

看一下app.wpy裏的頁面組件註冊

<style> 
  .mainBgcolor{ /*全局樣式全局用*/
   background:#ffffff;
   }
</style>
 
<script>
import wepy from 'wepy'
import 'wepy-async-function'
import { aldstat } from './utils/ald-stat'
export default class extends wepy.app {
 
   config={
     pages: [ //這裏註冊的全是pages裏面創建的pages.wpy組件，頁面之間跳轉
      'pages/index',
      'pages/login',
      'pages/companyDetailInfo',
     ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
 
  globalData = { //全局data 全局用
    userInfo: null
  }
</script>

2、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'})

<!--好比在父組件中-->
    <script>
    import wepy from 'wepy'
    import childComponent from '../components/childComponents'
    import footerComponent from '../components/footerComponents'
    export default class extends wepy.app {
        components={
           childComponent:childComponent,
           footerComponent:footerComponent
         }
        data={
           pData:666,
           wantChildData:'',
           wantFooterData:''
         };
       events={
          'childData':function(params){ //接收子組件傳過來的值
              this.wantChildData=params;//params就是傳過來的888
           },
          'footerData':function(params){ //接收子組件傳過來的值
             this.wantFooterData=params; //params就是傳過來的999
           }
       };
        methods={
           sendData(){
              this.$broadcast('parentData',this.pData);//向子組件發送pData數據
            }
        }
       onLoad(){
     
        };
       onShow(){
     
       }
       }
    </script> 

     
    <!--好比在子組件childComponents中-->
    <script>
    import wepy from 'wepy'
    import footerComponent from '../components/footerComponents'
    export default class extends wepy.app {
        components={
          footerComponent:footerComponent
         };
        data={
           wantParentData:'',
           cData:888
          };
        events={
          'parentData':function(params){ //接收父組件傳過來的值
                 this.wantParentData=params; //params就是傳過來的666
             }
         }
       methods={
           sendData(){
            this.$emit('childData',cData);//向父組件發送cData數據
          },
          sendFooterData(){
            this.$invoke('footerComponent',FooterMethod,{cDatas:this.cData}); //footerComponent指要往哪一個組件傳值，
                                                                             //FooterMethod是footerComponent裏定義的方法(注意不是methods裏面的)，
                                                                             //最後的對象是要傳遞的東西，也能夠是某個值
          }
     }
      onLoad(){
     
      }
      onShow(){
     
       }
      }
    </script> 

    <!--好比在子組件footerComponents中-->
    <script>
    import wepy from 'wepy'
    import childComponent from './childComponents'
     export default class extends wepy.app {
         components={
            childComponent:childComponent
          }
        data={
           wantParentData:'',
           wantCdata:'',
           fData:999
          };
        events={
          'parentData':function(params){ //接收父組件傳過來的值
                 this.wantParentData=params; //params就是傳過來的666
             }
         }
       methods={
           sendData(){
            this.$emit('footerData',fData);//向父組件發送fData數據
          }
        }
       onLoad(){
     
        }
       onShow(){
     
        }
       FooterMethod(params){//params就是接收到的參數對象
           this.wantCdata=params.cDatas //這裏的params.cData就是從childComponent組件裏傳過來的888
       }
      }
    </script>

props方法和vueJS中的props同樣，不過這裏分爲靜態傳值與動態傳值

<child title="mytitle"></child>
 
// 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
 <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
 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，至此我們的微信小程序的簡單使用及瞭解算是分享完了，畢竟我的也是道行有限，沒有鑽研太深，這些只是本人在實際項目開發過程當中用到和總結的經驗，有太多不足或不對的地方，但願你們多多給予指出與改正，我們一塊兒來共同窗習與進步！