快速入門 WePY 小程序
1、WePY介紹
WePY 是 騰訊 參考了Vue 等框架對原生小程序進行再次封裝的框架，更貼近於 MVVM 架構模式, 並支持ES6/7的一些新特性。javascript
2、WePY 使用
一、WePY的安裝或更新都經過npm進行：
npm install -g wepy-cli //全局安裝或更新WePY命令行工具（wepy腳手架）： wepy-cli wepy -v //查看wepy-cli版本 wepy init standard <projectName> //新建wepy小程序項目,1.7.0以前的版本使用：wepy new myproject wepy list //查看項目模板 cd <projectName> //切換至項目目錄 npm install //安裝依賴 wepy build --watch //開啓實時編譯
git base here：css
（1）全局安裝或更新 wepy-cli：html
（2）查看 wepy-cli 版本：vue
（3）建立 wepy 小程序項目：java
（4）切換至項目目錄，安裝依賴：node
（5）開啓實時編譯git
二、代碼高亮WebStorm/PhpStorm（其餘工具參見：wepy官網代碼高亮）
（1）打開Settings，搜索Plugins，搜索Vue.js插件並安裝。
（2） 打開Settings，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，便可高亮。
三、代碼優化
（1）代碼規範
- wepy標籤和原生同樣
- 自定義組件命名應避開：原生組件名（
input、button、view、repeat等）、WePY的輔助標籤<repeat> - 變量/方法名儘可能使用駝峯式命名，避免使用
$開頭（$開頭的標識符是WePY內建屬性/方法，可在js中以this.的方式直接使用，具體請參考API文檔） - app、pages、components文件名的後綴爲
.wpy，外鏈的文件能夠是其它後綴。 具體請參考wpy文件說明。 - 支持ES6/7的一些新特性，框架在ES6(ECMAScript 6)下開發（默認使用babel編譯），所以也須要使用ES6開發小程序，ES6中有大量的語法糖可讓咱們的代碼更加簡潔高效。
- wepy繼承了wx對象的方法，建議在wepy框架開發中不要用到wx對象的方法，雖然運行時效果是同樣，可是打包時會cli報錯（wepy中沒有wx對象）wepy中組件中使用的是class,vue中使用的的是對象。
（2）數據綁定
小程序頁面渲染層和JS邏輯層分開的，setData操做實際就是JS邏輯層與頁面渲染層之間的通訊，在同一次運行週期內屢次執行setData操做時，通訊的次數是一次仍是屢次取決於API自己的設計。WePY使用髒數據檢查對setData進行封裝，在函數運行週期結束時執行髒數據檢查，一來能夠不用關心頁面屢次setData是否會有性能上的問題，二來能夠更加簡潔去修改數據實現綁定，不用重複去寫setData方法。es6
//原生小程序
this.setData({title: 'this is title'});//經過Page提供的setData方法來綁定數據
//wepy
this.title = 'this is title';
//wepy 在異步函數中更新數據的時候，必須手動調用$apply方法，纔會觸發髒數據檢查流程的運行
setTimeout(() => {
this.title = 'this is title';
this.$apply();
}, 3000)
//保留setData方法，但不建議使用setData執行綁定，修復傳入undefined的bug，而且修改入參支持：
this.setData(target, value)
this.setData(object)
（3）事件綁定以及傳參優化
<view @tap="click"></view> // 原 bindtap="click"（省略了.default後綴 ）綁定小程序冒泡型事件
<view @tap.stop="click"></view> // 原catchtap="click" 綁定小程序捕獲型事件，如catchtap
<view @tap.capture="click"></view> // 原 capture-bind:tap="click"
<view @tap.capture.stop="click"></view> // 原 capture-catch:tap="click"
<!--事件傳參-->
<view @tap="click({{index}})"></view> // 原bindtap="click" data-index={{index}}
（4）框架默認對小程序提供的API全都進行了 Promise 處理，甚至能夠直接使用async/await等新特性進行開發，同時修復了一些原生API的缺陷（如：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);
}
（5）computed 計算屬性computed計算屬性（類型: { [key: string]: Function }），是一個有返回值的函數，可直接被看成綁定數據來使用，相似於data屬性。須要注意的是，只要是組件中有任何數據發生了改變，那麼全部計算屬性就都會被從新計算。
data = {
a: 1
}
// 計算屬性aPlus，在腳本中可經過this.aPlus來引用，在模板中可經過{{ aPlus }}來插值
computed = {
aPlus () {
return this.a + 1
}
}
（6）watcher 監聽器
經過監聽器watcher（類型: { [key: string]: Function }）可以監聽到任何屬性的更新。監聽器適用於當屬性改變時須要進行某些額外處理的情形。
data = {
num: 1
}
// 監聽器函數名必須跟須要被監聽的data對象中的屬性num同名，
// 其參數中的newValue爲屬性改變後的新值，oldValue爲改變前的舊值
watch = {
num (newValue, oldValue) {
console.log(`num value: ${oldValue} -> ${newValue}`)
}
}
// 每當被監聽的屬性num改變一次，對應的同名監聽器函數num()就被自動調用執行一次
onLoad () {
setInterval(() => {
this.num++;
this.$apply();
}, 1000)
}
（7）WXS (WeiXin Script)
WePY 從1.7.x 版本開始支持 wxs 語法，但語法與原生 wxs 稍有出入github
a.wxs是基於原生的wxs去實現的，只是經過編譯把如今的語法編譯爲原生語法web
②wxs必須是外鏈文件。而且後綴爲.wxs
③wxs引入後只能在template中使用，不能在script中使用
/**
project
└── src
├── wxs
| └── mywxs.wxs wxs 文件
├── pages
| └── index.wpy 頁面
└──app.wpy
**/
// mywxs.wxs
module.exports = {
text: 'This is from wxs',
filter: function (num) {
return num.toFixed(2);
}
};
// index.wpy
<template>
<text>{{m1.text}}</text>
<text>{{m1.filter(num)}}</text>
</template>
<script>
import wepy from 'wepy';
import mywxs from '../wxs/mywxs.wxs';
export default class Index extends wepy.page {
data = {
num: 10
};
wxs = {
m1: mywxs
}
};
</script>
（8）interceptor 攔截器
可使用WePY提供的全局攔截器對原生API的請求進行攔截。具體方法是配置API的config、fail、success、complete回調函數。參考示例：
import wepy from 'wepy';
export default class extends wepy.app {
constructor () {
// this is not allowed before super()
super();
// 攔截request請求
this.intercept('request', {
// 發出請求時的回調函數
config (p) {
// 對全部request請求中的OBJECT參數對象統一附加時間戳屬性
p.timestamp = +new Date();
console.log('config request: ', p);
// 必須返回OBJECT參數對象，不然沒法發送請求到服務端
return p;
},
// 請求成功後的回調函數
success (p) {
// 能夠在這裏對收到的響應數據對象進行加工處理
console.log('request success: ', p);
// 必須返回響應數據對象，不然後續沒法對響應數據進行處理
return p;
},
//請求失敗後的回調函數
fail (p) {
console.log('request fail: ', p);
// 必須返回響應數據對象，不然後續沒法對響應數據進行處理
return p;
},
// 請求完成時的回調函數(請求成功或失敗都會被執行)
complete (p) {
console.log('request complete: ', p);
}
});
}
}
3、WePY項目的目錄結構
dist目錄爲WePY經過build指令生成的目錄，除額外增長的npm目錄外，其目錄結構與原生小程序的目錄結構相似。
原生小程序：app(app.js、app.json、app.wxss)，page(page.js、page.json、page.wxml、page.wxss),文件必須同名。WePY中則使用了單文件模式：app.wpy，page.wpy。
==>
一個.wpy文件可分爲三大部分，各自對應於一個標籤：
- 腳本
<script>部分，又可分爲兩個部分：
邏輯部分，除了config對象以外的部分，對應於原生的.js文件
配置部分，即config對象，對應於原生的.json文件
-
結構
<template>部分，對應於原生的.wxml文件 -
樣式
<style>部分，對應於原生的.wxss文件
<!--lang決定了其代碼編譯過程，src決定是否外聯代碼，存在src屬性且有效時，會忽略內聯代碼--> <style lang="less" src="page1.less"></style>//lang值：css(默認)、less、scss、stylus、postcss <template lang="wxml" src="page1.wxml"></template>//lang值：wxml(默認)、xml、pug(原jade)。入口文件app.wpy不須要template，因此編譯時會被忽略。 <script></script>//lang值：babel(默認、TypeScript
主要對目錄的如下幾點分析（其餘目錄文件詳解相似於https://my.oschina.net/wangnian/blog/2050375中作的分析）：
一、src文件夾
（1）components組件：
組件實例繼承自wepy.component類，除了不須要config配置以及頁面特有的一些生命週期函數以外，其屬性與頁面屬性大體相同：
import wepy from 'wepy';
export default class MyComponent extends wepy.component {
props = {}//接收父組件傳來的參數
customData = {} // 自定義數據
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命週期函數
data = {}; // 頁面所需數據均需在這裏聲明，可用於模板數據綁定
components = {}; // 聲明頁面中所引用的組件，或聲明組件中所引用的子組件
mixins = []; // 聲明頁面所引用的Mixin實例
computed = {}; // 聲明計算屬性（詳見後文介紹）
watch = {}; // 聲明數據watcher（詳見後文介紹）
methods = {}; // 聲明頁面wxml中標籤的事件處理函數。注意，此處只用於聲明頁面wxml中標籤的bind、catch事件，自定義方法需以自定義方法的方式聲明，不能放在methods中，會報錯
events = {}; // WePY組件事件處理函數對象，存放響應組件之間經過$broadcast、$emit、$invoke所傳遞的事件的函數
}
/** 與page不一樣的是component不存在：
onShow () {} // 只在Page中存在的頁面生命週期函數
config = {}; // 只在Page實例中存在的配置數據，對應於原生的page.json文件，相似於app.wpy中的config
onReady() {} // 只在Page中存在的頁面生命週期函數
**/
原生小程序支持js模塊化，但彼此獨立，業務代碼與交互事件仍需在頁面處理。沒法實現組件化的鬆耦合與複用（如，模板A中綁定一個bindtap="myclick"，模板B中一樣綁定同樣bindtap="myclick"，那麼就會影響同一個頁面事件、數據）
WePY組件的全部業務與功能在組件自己實現，組件與組件之間彼此隔離（上述例子在WePY的組件化開發過程當中，A組件只會影響到A所綁定的myclick，B也如此）
// 原生代碼:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
<!-- index.js -->
var item = require('item.js')
// WePY
<!-- /components/item.wpy -->
<text>{{text}}</text>
<!-- index.wpy -->
<template>
<com></com>
</template>
<script>
import wepy from 'wepy';
import Item from '../components/item';
export default class Index extends wepy.page {
components = { com: Item }
}
</script>
ps，在 1.7.2-alpha4 的實驗版本中提供了對原生組件的支持
a.引用組件
頁面能夠引入組件，而組件還能夠引入子組件
/**
project
└── src
├── components
| └── child.wpy
├── pages
| ├── index.wpy index 頁面配置、結構、樣式、邏輯
| └── log.wpy log 頁面配置、結構、樣式、邏輯
└──app.wpy 小程序配置項（全局公共配置、公共樣式、聲明鉤子等）
**/
// index.wpy
<template>
<!-- 以`<script>`腳本部分中所聲明的組件ID爲名命名自定義標籤，從而在`<template>`模板部分中插入組件 -->
<view class="child1">
<child></child>
</view>
<view class="child2">
<!--注意：WePY中，在父組件template模板部分插入駝峯式命名的子組件標籤時，不能將駝峯式命名轉換成短橫杆式命名(好比將childCom轉換成child-com,這與Vue中不一致)-->
<anotherchild></anotherchild>
</view>
</template>
<script>
import wepy from 'wepy';
//引入組件文件
import Child from '../components/child';
export default class Index extends wepy.component {
//聲明組件，分配組件id爲child,須要注意的是，WePY中的組件都是靜態組件，是以組件ID做爲惟一標識的，每個ID都對應一個組件實例，當頁面引入兩個相同ID的組件時，這兩個組件共用同一個實例與數據，當其中一個組件數據變化時，另一個也會一塊兒變化。
components = {
//爲兩個相同組件的不一樣實例分配不一樣的組件ID，從而避免數據同步變化的問題
child: Child,
anotherchild: Child
};
}
</script>
②循環渲染組件（1.4.6新增）
WePY 1.x 版本中，循環渲染WePY組件時(相似於經過wx:for循環渲染原生的wxml標籤)，必須使用WePY定義的輔助標籤<repeat>
WePY組件是靜態編譯組件（在編譯階段編譯進頁面），每一個組件都是惟一的一個實例，目前只提供簡單的 repeat 支持（不支持在 repeat 的組件中去使用 props, computed, watch 等），所以以下：
<!-- 錯誤使用 --->
// list.wpy
<view>{{test.name}}</view>
// index.wpy
<repeat for="{{mylist}}">
<List :test.sync="item"></List>
</repeat>
<!-- 推薦用法 --->
// list.wpy
<repeat for="{{mylist}}">
<view>{{item.name}}</view>
</repeat>
// index.wpy
<List :mylist.sync="mylist"></List>
③props 傳值
props傳值在WePY中屬於父子組件之間傳值的一種機制，包括靜態傳值與動態傳值。
靜態傳值爲父組件向子組件傳遞常量數據，所以只能傳遞String字符串類型。
動態傳值是指父組件向子組件傳遞動態數據內容，父子組件數據徹底獨立互不干擾。但能夠經過使用.sync修飾符來達到父組件數據綁定至子組件的效果，也能夠經過設置子組件props的twoWay: true來達到子組件數據綁定至父組件的效果。若是既使用.sync修飾符，同時子組件props中添加的twoWay: true時，就能夠實現數據的雙向綁定。
// parent.wpy
<!--在父組件template模板部分所插入的子組件標籤中，使用:prop屬性（等價於Vue中的v-bind:prop屬性）來進行動態傳值-->
<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
<!--經過使用.sync修飾符來達到父組件數據綁定至子組件的效果-->
<script>
data = {
parentTitle: 'p-title'
};
</script>
// child.wpy
<script>
props = {
// 靜態傳值
title: String,
// 父向子單向動態傳值
syncTitle: {
type: String,
default: 'null'
},
// 雙向綁定
twoWayTitle: {
type: String,
default: 'nothing',
twoWay: true//twoWay: true(默認false)來達到子組件數據綁定至父組件的效果,若是同時使用.sync修飾符，就能夠實現雙向綁定
}
};
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屬性值，當在父組件中改變時，會同時改變子組件對應的值。
}
</script>
④組件通訊與交互
wepy.component基類提供$broadcast、$emit、$invoke三個方法用於組件之間的通訊和交互：
$broadcast
$broadcast事件是由父組件發起，全部子組件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序爲廣度優先搜索順序
$emit
$emit與$broadcast正好相反，組件發起事件後全部祖先組件會依次接收到$emit事件
//子組件：
this.$emit('some-event', 1, 2, 3, 4);
//父組件：
import wepy from 'wepy'
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
// events對象中所聲明的函數爲用於監聽組件之間的通訊與交互事件的事件處理函數
events = {
'some-event': (p1, p2, p3, $event) => {
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
}
};
// Other properties
}
$invoke
$invoke是一個頁面/組件對另外一個組件中的方法的直接調用，經過傳入組件路徑找到相應的組件，而後再調用其方法。
this.$invoke('ComA', 'someMethod', 'someArgs');//在頁面Page_Index中調用組件ComA的某個方法
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');//在組件ComA中調用組件ComG的某個方法
//只能在methods中使用 在周期函數使用會報錯
⑤組件自定義事件處理函數（.user事件後綴，1.4.8新增）
示例以下（注意，若是用了自定義事件，則events中對應的監聽函數不會再執行）：
// index.wpy
<template>
<child @childFn.user="parentFn"></child>
</template>
<script>
import wepy from 'wepy'
import Child from '../components/child'
export default class Index extends wepy.page {
components = {
child: Child
}
methods = {
parentFn (num, evt) {
console.log('parent received emit event, number is: ' + num)
}
}
}
</script>
// child.wpy
<template>
<view @tap="tap">Click me</view>
</template>
<script>
import wepy from 'wepy'
export default class Child extends wepy.component {
methods = {
tap () {
console.log('child is clicked')
this.$emit('childFn', 100)
}
}
}
</script>
⑥slot 組件內容分發插槽
WePY中的slot插槽做爲內容分發標籤的空間佔位標籤，便於在父組件中經過對至關於擴展板卡的內容分發標籤的「插拔」，更爲靈活、方便地對子組件進行內容分發。
注意，父組件中的標籤必須有slot屬性，且值爲子組件中對應的slot名，這樣父組件內容分發標籤中的內容（即使沒有內容，子組件插槽中的默認內容也不會顯示出來，只有刪除了父組件中對應的內容分發標籤，才能顯示出來）會覆蓋掉子組件對應插槽中的默認內容
//首先在子組件template模板部分中聲明slot標籤做爲內容插槽，同時必須在其name屬性中指定插槽名稱，還可設置默認的標籤內容
<view class="panel">
<slot name="title">默認標題</slot>
<slot name="content">默認內容</slot>
</view>
//而後在引入了該帶有插槽的子組件的父組件template模板部分中聲明用於「插拔」的內容分發標籤
<panel>
<view slot="title">新的標題</view>
<view slot="content">
<text>新的內容</text>
</view>
</panel>
eg：message-com.wpy：
<template>
<!-- 1.4.6新增:循環渲染時(相似於原生的wx:for)，必須使用WePY定義的輔助標籤"<repeat>" -->
<repeat for="{{messageList}}" index="index" item="message">
<navigator url="/pages/topicDetail?topicId={{message.busiId}}">
<view class="msgList">
<!-- "<text selectable='true'>" 使文字可選-->
<text selectable='true'>{{message.content}}</text>
<view style="text-align: right;">
<text style="color: rgb(202,202,202);">{{message.createTime}}</text>
</view>
</view>
</navigator>
</repeat>
</template>
<script>
import wepy from 'wepy' //引入wepy
export default class Message extends wepy.component {//建立組件實例
props = {//接收父組件參數
messageList: {// * 類型和默認值參數不能省略，組件會偶發性接收不到父組件傳遞的參數
type: Array,
default:[]
}
};
}
</script>
<style scoped lang="less">
.topicInfo text {
font-size: 12px;
color: #666;
}
.topicBottom view {
margin-right: 15px;
}
.msgList {
background-color: #fff;
margin-top: 7px;
padding: 10px 15px;
}
</style>
message-page.wpy：
<template>
<view wx:if="{{!messageList.length}}" class="noData">暫無消息</view>
<block wx:else>
<message :messageList.sync="messageList"></message>
<downLoad :show.sync="getListParam"></downLoad>
</block>
</template>
<script>
import wepy from 'wepy'
import Message from '../components/message'
import DownLoad from '../components/downLoad'
import listMixin from '../mixins/list'
import {connect} from 'wepy-redux'
import {getMessageList} from '../store/actions'
@connect({
messageList(state) {
return state.reducer.messageList;
}
}, {
getMessageList
})
export default class MineMessages extends wepy.page {
config = {
navigationBarTitleText: '個人消息'
};
components = {
message: Message,
downLoad: DownLoad
};
data = {};
mixins = [listMixin];
methods = {
getList(params) {
let listParam = {
messageType: 4
};
if (wx.getStorageSync('userId')) {
this.getMessageList(Object.assign(listParam, params));
} else {
wx.showToast({
title: '您尚未登陸',
icon: 'none'
});
}
}
};
}
</script>
（2）mixins：Mixin 混合（公用的js）
混合能夠將組件之間的可複用部分抽離，從而在組件中使用混合時，能夠將混合的數據，事件以及方法注入到組件之中。混合分爲兩種：
- 默認式混合（data、components、events、自定義方法），即組件未聲明的選項將混合對象中注入組件之中，組件已聲明的選項將不受影響
- 兼容式混合（
methods響應事件、小程序頁面事件），即先響應組件自己響應事件，而後再響應混合對象中響應事件（Vue則相反，先執行mixin中的函數， 再執行組件自己的函數）
eg：listMixin.js：
import wepy from 'wepy'
export default class ListMixin extends wepy.mixin {//建立mixin實例
config = {
enablePullDownRefresh: true,//開啓下拉刷新，默認是關閉的
onReachBottomDistance: 10,//設置觸發下拉刷新的底部距離
backgroundColor: "#eab010"//設置背景色
};
data = {
getListParam: {//獲取列表數據的通用參數
hasMoreData: true,
loading: false,
noMore: false,
page: 1,
limit: 10,
}
};
/**
* 頁面相關事件處理函數--監聽用戶下拉動做（下拉刷新）
*/
onPullDownRefresh() {
wx.showNavigationBarLoading(); //在標題欄中顯示加載
this.data.getListParam.page = 1;//下拉刷新時參數page=1
this.methods.getList(this.data.getListParam);//調用組件中的獲取列表函數
setTimeout(() => {
wx.hideNavigationBarLoading(); //完成中止加載
wx.stopPullDownRefresh(); //中止下拉刷新
}, 300)
};
/**
* 頁面上拉觸底事件的處理函數（上拉加載）
*/
onReachBottom() {
if (this.data.getListParam.hasMoreData) {
this.data.getListParam.page++;//每觸發一次page++
this.data.getListParam.hasMoreData = false;//關閉可調用函數
this.data.getListParam.loading = true;//顯示加載中...（本身寫的底部加載中樣式的組件）
this.methods.getList(this.data.getListParam);//調用組件中的獲取列表函數
setTimeout(() => {
this.data.getListParam.loading = false;//關閉顯示加載中...（本身寫的底部加載中樣式的組件）
this.$apply();//強制渲染
}, 100);
} else {
this.data.getListParam.noMore = true;//顯示加載完成（本身寫的底部加載到底樣式的組件）
}
};
onReady() {
this.methods.getList(this.data.getListParam);//初始化請求頁面數據
}
}
使用時引入而後注入到組件實例（最好放在data屬性後，不然會偶發性報錯），eg：
（3）頁面page.wpy
Page頁面實際上繼承自Component組件，即Page也是組件。除擴展了頁面所特有的config配置以及特有的頁面生命週期函數以外，其它屬性和方法與Component一致：
import wepy from 'wepy';
export default class MyPage extends wepy.page {
customData = {} // 自定義數據
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命週期函數
onUnload() {} // 監聽頁面卸載
onReady() {} // 只在Page中存在的頁面生命週期函數
onShow () {} // 只在Page中存在的頁面生命週期函數,當小程序啓動，或從後臺進入前臺顯示
onHide() {} // 只在Page中存在的頁面生命週期函數，當小程序從前臺進入後臺
config = {}; // 只在Page實例中存在的配置數據，對應於原生的page.json文件，相似於app.wpy中的config
data = {}; // 頁面所需數據均需在這裏聲明，可用於模板數據綁定
components = {}; // 聲明頁面中所引用的組件，或聲明組件中所引用的子組件
mixins = []; // 聲明頁面所引用的Mixin實例
computed = {}; // 聲明計算屬性（詳見後文介紹）
watch = {}; // 聲明數據watcher（詳見後文介紹）
methods = {}; // 聲明頁面wxml中標籤的事件處理函數。注意，此處只用於聲明頁面wxml中標籤的bind、catch事件，自定義方法需以自定義方法的方式聲明
events = {}; // WePY組件事件處理函數對象，存放響應組件之間經過$broadcast、$emit、$invoke所傳遞的事件的函數
onPullDownRefresh(){} // 監聽用戶下拉動做
onReachBottom(){} // 頁面上拉觸底事件的處理函數
onShareAppMessage(){} // 用戶點擊右上角分享
onPageScroll(){} // 頁面滾動
onTabItemTap(){} // 當前是 tab 頁時，點擊 tab 時觸發
}
（4）狀態管理store（redux）
（5）app.wpy：小程序入口
app.wpy實例繼承自wepy.app類，包含：config配置對象（對應原生的app.json文件，build編譯時會根據config屬性自動生成app.json文件）、globalData全局數據對象、自定義方法與屬性、小程序生命週期函數。
在Page頁面實例中，能夠經過this.$parent來訪問App實例。
<script>
import wepy from 'wepy';
export default class extends wepy.app {
config = {
pages:[// pages定義當前小程序全部頁面路徑，讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄
'pages/index',
'pages/mine'
],
window:{//window定義小程序全部頁面的頂部背景顏色，文字顏色定義等。
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "頂部標題",
"navigationBarTextStyle": "black"
},
tabBar: {
selectedColor: '#ea9100',//底部導航字體選中時的顏色
list: [
{
pagePath: 'pages/index',//導航頁面路徑（必須在pages中定義）
text: '首頁',//導航名
iconPath: 'img/index.png',//未選中的導航icon
selectedIconPath: 'img/index1.png'//選中時的導航icon
},
{
pagePath: 'pages/mine',
text: '個人',
iconPath: 'img/mine.png',
selectedIconPath: 'img/mine1.png'
}
]
},
};
onLaunch() {//初始化
console.log(this);
}
onShow(){}//當小程序啓動，或從後臺進入前臺顯示
onHide(){}//當小程序從前臺進入後臺
}
</script>
<style lang="less">
/** less **/
</style>
（6）index.template.html：web頁面的入口文件
二、project.config.json小程序項目配置文件
1.7.0以後的版本會在根目錄包含project.config.json，使用微信開發者工具-->添加項目，項目目錄請選擇項目根目錄便可根據配置完成項目信息自動配置。
1.7.0以前生成的代碼包可能不存在project.config.json文件，建議手動建立該文件後再添加項目。project.config.json文件內容以下：
{
"description": "project description",
"setting": {
"urlCheck": true,//對應不檢查安全域名選項，開啓。 若是已配置好安全域名則建議關閉
"es6": false,//對應關閉ES6轉ES5選項，關閉。 重要：未關閉會運行報錯
"postcss": false,//對應關閉上傳代碼時樣式自動補全選項，關閉。 重要：某些狀況下漏掉此項也會運行報錯
"minified": false //對應關閉代碼壓縮上傳選項，關閉。重要：開啓後，會致使真機computed, props.sync 等等屬性失效。（注：壓縮功能可以使用WePY提供的build指令代替）
},
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "Project name",
"miniprogramRoot": "./dist"
}
三、wepy.config.js
const path = require('path');
var prod = process.env.NODE_ENV === 'production';
module.exports = {
/*wpyExt：缺省值爲'.wpy'，IDE默認狀況下不會對此文件類型進行高亮處理
除了進行前文代碼高亮設置以外
還能夠直接將相關文件的後綴名由.wpy修改成.vue，而後將此選項修改成.vue
*/
wpyExt: '.wpy',
eslint: false,
cliLogs: !prod,
build: {
web: {
htmlTemplate: path.join('src', 'index.template.html'),
htmlOutput: path.join('web', 'index.html'),
jsOutput: path.join('web', 'index.js')
}
},
resolve: {
alias: {
counter: path.join(__dirname, 'src/components/counter'),
'@': path.join(__dirname, 'src')
},
aliasFields: ['wepy', 'weapp'],
modules: ['node_modules']
},
/** compilers爲1.3.1版本以後的功能，若是須要使用其它語法，請先配置compilers，而後再安裝相應的compilers
目前支持wepy-compiler-less， wepy-compiler-postcss，wepy-compiler-sass、wepy-compiler-babel、wepy-compiler-pug
其餘compiler持續開發中
*/
compilers: {
less: {
compress: prod
},
/*sass: {
outputStyle: 'compressed'
},*/
babel: {
sourceMap: true,
presets: [
'env'
],
/*
plugins爲1.1.6版本以後的功能
目前支持js壓縮wepy-plugin-ugliyjs、圖片壓縮wepy-plugin-imagemin
其餘plugin持續開發中
*/
plugins: [
'transform-class-properties',
'transform-decorators-legacy',
'transform-object-rest-spread',
'transform-export-extensions',
]
}
},
plugins: {},
/*在使用的地方先引入import wepy from 'wepy'; 而後wepy.$appConfig.屬性名。eg：wepy.$appConfig.baseUrl*/
appConfig: {
baseUrl:process.env.NODE_ENV === 'production'? 'https://api.a.com/' : 'https://api.a.com/dev/',// 運行 npm run dev命令時，域名爲https://api.a.com/dev/，運行 npm run build時域名爲https://api.a.com/
noPromiseAPI: ['createSelectorQuery']
}
}
if (prod) {
// 壓縮sass
module.exports.compilers['less'] = {outputStyle: 'compressed'}
// 壓縮js
module.exports.plugins = {
uglifyjs: {
filter: /\.js$/,
config: {}
},
imagemin: {
filter: /\.(jpg|png|jpeg)$/,
config: {
jpg: {
quality: 80
},
png: {
quality: 80
}
}
}
}
}
相關文章
- 1. 快速入門 WePY 小程序【轉】
- 2. 快速入門 WePY 小程序
- 3. wepy快速入門
- 4. anu小程序快速入門
- 5. 微信小程序快速入門1
- 6. 快速入門微信小程序
- 7. 小程序swiper快速入門
- 8. linux_shell程序快速入門
- 9. 小程序快速入門：小程序的基本結構
- 10. 小程序從入門到快速開發小程序項目
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • ASP 快速參考 - ASP 教程
- • YAML 入門教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 快速入門 WePY 小程序【轉】
- 2. 快速入門 WePY 小程序
- 3. wepy快速入門
- 4. anu小程序快速入門
- 5. 微信小程序快速入門1
- 6. 快速入門微信小程序
- 7. 小程序swiper快速入門
- 8. linux_shell程序快速入門
- 9. 小程序快速入門：小程序的基本結構
- 10. 小程序從入門到快速開發小程序項目