溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、微信小程序wepy框架簡介:
微信小程序WePY框架是騰訊官方推出來的框架,類似的框架還有美團的mpvue,京東的Taro等; 目前公司開發小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在開發過程中參考了 Vue 等現有框架的一些語法風格和功能特性，對原生小程序的開發模式進行了再次封裝，更貼近于 MVVM 架構模式, 并支持ES6/7的一些新特性。相對更容易上手,提高開發效率;
二、WePY項目的創建與目錄結構
WePY的安裝或更新都通過npm進行，全局安裝或更新WePY命令行工具
npm install wepy-cli -g
在開發目錄中生成Demo開發項目
wepy new myproject
切換至項目目錄
cd myproject
安裝依賴
npm install
開啟實時編譯
wepy build --watch
WePY項目的目錄結構如下
├── dist 小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件） ├── node_modules ├── src 代碼編寫的目錄（該目錄為使用WePY后的開發目錄） | ├── components WePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用） | | ├── com_a.wpy 可復用的WePY組件a | | └── com_b.wpy 可復用的WePY組件b | ├── pages WePY頁面目錄（屬于完整頁面） | | ├── index.wpy index頁面（經build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件） | | └── other.wpy other頁面（經build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件） | └── app.wpy 小程序配置項（全局數據、樣式、聲明鉤子等；經build后，會在dist目錄下生成app.js、app.json和app.wxss文件） └ ── package.json 項目的package配置
搭建好項目后，IDE需配置代碼高亮，文件后綴為.wpy，可共用Vue的高亮規則，但需要手動設置，具體配置大家可參考wepy官方文檔
三、wepy使用心得總結：
1.wepy代碼風格類似Vue，如computed,data,methods等用法差不多,熟悉vue開發的同學看看文檔可以輕松上手，不過還是有很多地方寫法容易混淆，我工作中遇到的總結幾個,如列表循環,條件渲染,父子組件值傳遞等,下面舉例說明:
1). wepy和vue列表循環對比:
// wepy 列表循環,外面可套一層repeat標簽,注意和vue寫法的區別
<repeat for="{{list}}" key="index>
<view>{{item}}</view>
</repeat>
// vue 列表循環,外面可套一層template標簽
<template v-for="(item,index) in list" :key="index"> // 不推薦key直接用索引index
<div>{{item}}<div>
</template>
2). wepy和vue條件渲染中,wepy需要加{{}},vue不需要,里面都可以寫表達式進行判斷:
<view wx:if="{{show}}"></view>
<div v-if="show"></div>
3). 父子組件值傳遞兩者都在子組件中用props接收, props中可以定義能接收的數據類型，如果不符合會報錯,wepy可以通過使用.sync修飾符來達到父組件數據綁定至子組件的效果，也可以通過設置子組件props的twoWay:true來達到子組件數據綁定至父組件的效果。那如果既使用.sync修飾符,同時子組件props中添加的twoWay: true時，就可以實現數據的雙向綁定了;
// 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屬性值，當在父組件中改變時，會同時改變子組件對應的值。
2.wepy支持自定義組件開發,實現組件復用,減少代碼冗余,提高開發效率;
3.wepy支持引入npm包,拓展了很多方法;
4.支持Promise,ES2015+特性，如async await 等;
5.支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug;
6.支持多種插件處理，文件壓縮，圖片壓縮，內容替換等;
7.支持 Sourcemap，ESLint代碼規范管理等;
8.對小程序wx.request方法參數進行了修改,返回Promise對象,優化了事件參數傳遞,具體用法如下:
// wx.request原生代碼:
wx.request({
url: 'xxx',
success: function (data) {
console.log(data);
}
});
// WePY 使用方式, 需要開啟 Promise 支持，參考開發規范章節
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);
// 原生的事件傳參方式:
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
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。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
tapName (id, title, other, event) {
console.log(id, title, other)// output: 1, wepy, otherparams
}
}
四 、最后一點點感悟:
本文總結的比較淺顯,很多地方說的也不是太詳細,如有錯誤的地方大家可以批評指正,歡迎大家留言一起交流探討,堅持學習,不斷探索總結,路漫漫其修遠兮,吾將上下而求索!
參考資料:
wepy官方文檔 ;
微信小程序官網開發文檔 ;
vue官方開發文檔
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
