真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序wepy框架學(xué)習(xí)和使用心得詳解

一、微信小程序wepy框架簡介:

成都創(chuàng)新互聯(lián)主營蘭考網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件定制開發(fā),蘭考h5小程序制作搭建,蘭考網(wǎng)站營銷推廣歡迎蘭考等地區(qū)企業(yè)咨詢

微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團(tuán)的mpvue,京東的Taro等; 目前公司開發(fā)小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在開發(fā)過程中參考了 Vue 等現(xiàn)有框架的一些語法風(fēng)格和功能特性,對原生小程序的開發(fā)模式進(jìn)行了再次封裝,更貼近于 MVVM 架構(gòu)模式, 并支持ES6/7的一些新特性。相對更容易上手,提高開發(fā)效率;

二、WePY項(xiàng)目的創(chuàng)建與目錄結(jié)構(gòu)

WePY的安裝或更新都通過npm進(jìn)行,全局安裝或更新WePY命令行工具

npm install wepy-cli -g

在開發(fā)目錄中生成Demo開發(fā)項(xiàng)目

wepy new myproject

切換至項(xiàng)目目錄

cd myproject

安裝依賴

npm install

開啟實(shí)時編譯

wepy build --watch

WePY項(xiàng)目的目錄結(jié)構(gòu)如下

 ├── dist          小程序運(yùn)行代碼目錄(該目錄由WePY的build指令自動編譯生成,請不要直接修改該目錄下的文件)
 ├── node_modules      
 ├── src          代碼編寫的目錄(該目錄為使用WePY后的開發(fā)目錄)
 |  ├── components     WePY組件目錄(組件不屬于完整頁面,僅供完整頁面或其他組件引用)
 |  |  ├── com_a.wpy   可復(fù)用的WePY組件a
 |  |  └── com_b.wpy   可復(fù)用的WePY組件b
 |  ├── pages       WePY頁面目錄(屬于完整頁面)
 |  |  ├── index.wpy   index頁面(經(jīng)build后,會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件)
 |  |  └── other.wpy   other頁面(經(jīng)build后,會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件)
 |  └── app.wpy      小程序配置項(xiàng)(全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等;經(jīng)build后,會在dist目錄下生成app.js、app.json和app.wxss文件)
 └ ── package.json      項(xiàng)目的package配置

搭建好項(xiàng)目后,IDE需配置代碼高亮,文件后綴為.wpy,可共用Vue的高亮規(guī)則,但需要手動設(shè)置,具體配置大家可參考wepy官方文檔

三、wepy使用心得總結(jié):

1.wepy代碼風(fēng)格類似Vue,如computed,data,methods等用法差不多,熟悉vue開發(fā)的同學(xué)看看文檔可以輕松上手,不過還是有很多地方寫法容易混淆,我工作中遇到的總結(jié)幾個,如列表循環(huán),條件渲染,父子組件值傳遞等,下面舉例說明:

1). wepy和vue列表循環(huán)對比:

   // wepy 列表循環(huán),外面可套一層repeat標(biāo)簽,注意和vue寫法的區(qū)別
   // 不推薦key直接用索引index
    
{{item}}

2). wepy和vue條件渲染中,wepy需要加{{}},vue不需要,里面都可以寫表達(dá)式進(jìn)行判斷:


3). 父子組件值傳遞兩者都在子組件中用props接收, props中可以定義能接收的數(shù)據(jù)類型,如果不符合會報錯,wepy可以通過使用.sync修飾符來達(dá)到父組件數(shù)據(jù)綁定至子組件的效果,也可以通過設(shè)置子組件props的twoWay:true來達(dá)到子組件數(shù)據(jù)綁定至父組件的效果。那如果既使用.sync修飾符,同時子組件props中添加的twoWay: true時,就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了;

// 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)的值。

2.wepy支持自定義組件開發(fā),實(shí)現(xiàn)組件復(fù)用,減少代碼冗余,提高開發(fā)效率;

3.wepy支持引入npm包,拓展了很多方法;

4.支持Promise,ES2015+特性,如async await 等;

5.支持多種編譯器,Less/Sass/Styus、Babel/Typescript、Pug;

6.支持多種插件處理,文件壓縮,圖片壓縮,內(nèi)容替換等;

7.支持 Sourcemap,ESLint代碼規(guī)范管理等;

8.對小程序wx.request方法參數(shù)進(jìn)行了修改,返回Promise對象,優(yōu)化了事件參數(shù)傳遞,具體用法如下:

// wx.request原生代碼:
wx.request({
  url: 'xxx',
  success: function (data) {
    console.log(data);
  }
});

// WePY 使用方式, 需要開啟 Promise 支持,參考開發(fā)規(guī)范章節(jié)
wepy.request('xxxx').then((d) => console.log(d));

// async/await 的使用方式, 需要開啟 Promise 和 async/await 支持,參考 WIKI
async function request () {
  let d = await wepy.request('xxxxx');
  console.log(d);

// 原生的事件傳參方式:
 Click me! 
Page({
  tapName: function (event) {
    console.log(event.currentTarget.dataset.id)// output: 1
    console.log(event.currentTarget.dataset.title)// output: wepy
    console.log(event.currentTarget.dataset.other)// output: otherparams
  }
});

// WePY 1.1.8以后的版本,只允許傳string。
 Click me! 
methods: {
  tapName (id, title, other, event) {
    console.log(id, title, other)// output: 1, wepy, otherparams
  }
}


四 、最后一點(diǎn)點(diǎn)感悟:

本文總結(jié)的比較淺顯,很多地方說的也不是太詳細(xì),如有錯誤的地方大家可以批評指正,歡迎大家留言一起交流探討,堅(jiān)持學(xué)習(xí),不斷探索總結(jié),路漫漫其修遠(yuǎn)兮,吾將上下而求索!

參考資料:

wepy官方文檔 ;

微信小程序官網(wǎng)開發(fā)文檔 ;

 vue官方開發(fā)文檔

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


新聞名稱:微信小程序wepy框架學(xué)習(xí)和使用心得詳解
標(biāo)題網(wǎng)址:http://weahome.cn/article/jopjhd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部