wepy公共样式_wepy框架开发小程序文档
目錄
1. wepy項目構建
簡單介紹：wepy是一個微信小程序框架，支持模塊化開發，開發風格類似Vue.js。可搭配redux使用，能同時打包出web和小程序。
全局安裝或更新WePY命令行工具
npm install -g wepy-cli
創建項目
wepy init standard my-project[項目名]
PS I:\H5\WeiXinProgram> wepy init standard wepy-demo
? Project name [wepy-demo]
? AppId [appid]
? Project description [A WePY project]
? Author [author]
? Use ESLint to lint your code? No ---選擇Yes，會對代碼格式校驗
? Use Redux in your project? No ---選擇Yes，可以使用Redux框架語法,目錄會多出store目錄
? Use web transform feature in your project? Yes ---選擇Yes會有index.template.html
切換至項目目錄
cd wepy-demo[項目目錄]
安裝依賴
npm install
開啟實時編譯
npm run dev
構建項目完整目錄
2-wepy文件使用
1、app.wpy文件介紹
// template、style、script三大標簽，有lang、src屬性，當src屬性存在文件，那么其內部代碼會被忽略。
// app.apy小程序入口文件
@import "./styles/gb750"; --- 編譯成app.wxss文件,可以外部引用
import wepy from 'wepy'
import 'wepy-async-function' --- 使用Promise引入
export default class extends wepy.app { //該處是wepy.app，無類名
config = { --- 編譯成app.json文件
pages: [
'pages/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
constructor () {
super()
// 兩個中間件
this.use('requestfix') // requestfix: 修復小程序請求并發問題。
this.use('promisify') // promisify：使用wepy.xxx的方式請求小程序原生API都將Promise化。(需要我們手動加上)
};
customData = {}
customFunction () {}
globalData = {} ---全局數據
onLaunch () {}
onShow () {}
}
2、pages目錄下的文件介紹
// pages目錄下存放主頁面，代碼編寫與app.wpy相似，不同之處如下：
// 因為app.wpy不需要template，但pages目錄下的頁面需要
// 在Pages下的頁面實例中，可以通過this.$parent來訪問App實例。
// Page頁面繼承自Component組件，即Page也是組件。除擴展了頁面所特有的config配置以及特有的頁面生命周期函數之外，
其它屬性和方法與Component一致。
--- 編譯成index.wxml文件，只有pages目錄下的template會編譯成wxml文件
---組件標簽
import wepy from 'wepy' ---一定要引入
import Counter from '../components/counter' ---引入組件
import testMixin from '../mixins/test' ---引入混合組件
export default class Index extends wepy.page {
// export default class MyComponent extends wepy.component
customData = {} // 自定義數據
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命周期函數
onShow () {} // 只在Page中存在的頁面生命周期函數
config = {} // 只在Page實例中存在的配置數據，對應于原生的page.json文件
data = {...this.customData} // 頁面所需數據均需在這里聲明，可用于模板數據綁定
components = {
// 為兩個相同組件的不同實例分配不同的組件ID，從而避免數據同步變化的問題 counter1 : Counter;counter2 : Counter;} ---{組件標簽名 : 引入組件名;}
// WePY中，在父組件template模板部分插入駝峰式命名的子組件標簽時，不能將駝峰式命名轉換成短橫桿式命名(比如將childCom轉換成child-com)，這與Vue中的習慣是不一致。
//聲明頁面中所引用的組件，或聲明組件中所引用的子組件
mixins = [testMixin] // 聲明頁面所引用的Mixin實例
computed = {} // 聲明計算屬性，是一個有返回值的函數，可直接被當作綁定數據來使用。
watch = {} // 聲明數據watcher
methods = {} // 聲明頁面wxml中標簽的事件處理函數。注意，此處只用于聲明頁面wxml中標簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
events = {} // 聲明組件之間的事件處理函數
}
3、components目錄下的文件介紹
// components目錄下存放組件
// 頁面可以引入組件，而組件還可以引入子組件。
import wepy from 'wepy'
// 引入child組件文件
import Child from '../components/child';
export default class List extends wepy.component {
//該處是wepy.component，且加上類名加以區分
components = {
// 聲明頁面中要使用到的Child組件的ID為child
child: Child
}
}
4、mixins目錄下的文件介紹
// mixins是放混合組件的地方，用于復用不同組件中的相同功能。
// 例如：MyMixin.js
import wepy from 'wepy'
export default class MyMixin extends wepy.mixin {
//該處是wepy.mixin，且加上類名加以區分
}
// mycom.js
import MyMixin from './mymixin';
export class MyCom extends wepy.component {
mixins = [MyMixin];
}
5、wepy.config.js文件介紹
// wepy.config.js是webpack配置文件
// 該文件可配置環境變量來改變運行時的參數
wpyExt: '.wpy', ---文件后綴名設置
eslint: false, ---關閉eslint校驗
resolve: {
alias: {
counter: path.join(__dirname, 'src/components/counter'),
'@': path.join(__dirname, 'src') //配置文件路徑代碼
},
aliasFields: ['wepy', 'weapp'],
modules: ['node_modules']
},
一、 wepy項目中使用async await
官方指出鏈接需要在該文件下配置如下語句：
babel: {
"presets": [
"env"
],
"plugins": [
"transform-export-extensions",
"syntax-export-extensions"
]
}
二、 wepy根據環境變量來改變運行時的參數
3-wepy優化之處
1. 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 支持
async function request () {
let d = await wepy.request('xxxxx');
console.log(d);
}
2. 優化事件參數傳遞
// 原生的事件傳參方式:
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。
// 事件響應以及組件通訊事件參數順序調整，將$event移至末尾，即最后一個參數為事件參數。
Click me!
methods: {
tapName (id, title, other, event) {
console.log(id, title, other)// output: 1, wepy, otherparams
}
}
// 蒙層彈窗出現與隱藏
...
...
data = {
flags: {
layerRule: true,
layerPrize: true,
...
}
}
//出現
showLayer (e,layerName) {
let key = layerName.currentTarget.dataset.wpyshowlayerA; //優化data-,此時dataset結點后的字段名框架自動生成，
為wpy + 函數名(小寫) + 大寫26個字母中的一個，
由于我上面只傳了一個參數，則此時e代表的就是此時傳的第一個參數名。
// 記住：最后一個才會是事件名，所有的事件都綁在最后一個參數上。
this.flags[key] = false;
},
//消失
hideLayer (e,layerName) {
let key = layerName.currentTarget.dataset.wpyhidelayerA;
this.flags[key] = true;
},
3.動態綁定class
// 在vue中動態綁定class
// 在wepy中，要使用微信原生的綁定語法
// 其中 class-a 是不需要動態綁定的class， 雙括號中才是需要綁定的class
4.新增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);
}
});
}
}
4-wepy組件通信
組件傳值
// wepy.component基類提供$broadcast、$emit、$invoke三個方法用于組件之間的通信和交互
· $broadcast：父組件觸發所有子組件事件
· $emit：子組件觸發父組件事件
· $invoke：子組件觸發子組件事件
注意：可以以$標識符來獲取wepy框架內建屬性和方法。$name:String: 組件名稱。
$broadcast使用案例：
$broadcast事件是由父組件發起，所有子組件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜索順序。
// index.wpy(pages頁面) ---父組件
組件通信
---子組件標簽
import List from '../components/list'
export default class Index extends wepy.page {
components = {
list: List
}
methods = {
communicate () {
this.$broadcast('index-broadcast')
}
}
}
// list.wpy(components頁面) ---子組件
// events對象中所聲明的函數為用于監聽組件之間的通信與交互事件的事件處理函數
events = {
'index-broadcast': (...args) => {
let $event = args[args.length - 1]
console.log(`${this.$name} receive ${$event.name} from ${$event.source.name}`) // list receive index-broadcast from undefined
}
}
$emit使用案例：
$emit與$broadcast正好相反，事件發起組件的所有祖先組件會依次接收到$emit事件。
下面通過這個例子來說明
// index.wpy(pages頁面) ---父組件
測試組件
計數組件1:
//自定義組件綁定事件使用.user，其中@表示事件修飾符，
index-emit 表示事件名稱，.user表示事件后綴。
// 目前總共有三種事件后綴：
// .default: 綁定小程序冒泡型事件，如bindtap，.default后綴可省略不寫；
// .stop: 綁定小程序捕獲型事件，如catchtap；
// .user: 綁定用戶自定義組件事件，通過$emit觸發。注意，如果用了自定義事件，則events中對應的監聽函數不會再執行。
計數組件2:
methods = {
counterEmit (...args) {
let $event = args[args.length - 1]
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name} counterEmit`) // Index receive index-emit from counter1 counterEmit
}
}
events = {
'index-emit': (...args) => {
let $event = args[args.length - 1]
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`) // Index receive index-emit from counter2
}
}
// count.wpy(components頁面) ---子組件
+
-
{{num}}
methods = {
plus () {
this.num = this.num + 1
console.log(this.$name + ' plus tap')
this.$emit('index-emit')
},
minus () {
this.num = this.num - 1
console.log(this.$name + ' minus tap')
}
}
$invoke使用案例：
$invoke是一個頁面或組件對另一個組件中的方法的直接調用，通過傳入組件路徑找到相應的組件，然后再調用其方法。
比如，想在頁面Page_Index中調用組件ComA的某個方法：
this.$invoke('ComA', 'someMethod', 'someArgs');
如果想在組件ComA中調用組件ComG的某個方法：
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
5-wepy的API使用
wepy 封裝的屬性,可以獲取globalData、$wxapp等
1.$instance 全局實例封裝
//wepy.app Class
//屬性
1.$wxapp:Object 等同于 getApp()
2.$pages:List 所有列表頁面
3.$interceptors:List 所有攔截器列表
//方法
4.$intercept:(api:String, Probider:Object) 使用攔截器對原生API請求進行攔截
5.use(middleWare:String|Function) 使用中間件
//wepy.component Class
//屬性
1.$name:String 組件名稱
2.$isComponent:Boolean 是否是組件，如果是頁面，此值為false
3.$wxpage:Object 小程序原生page
4.$parent:Page|App 組件的父組件，如果當前是組件是page對象，那么$parent的值為App對象
5.$root:Page 組件所在的Page對象，如果當前組件是Page對象，那么$root的值就是自己本身。
6.$coms:List 組件的子組件列表
7.$mixins:Array[Mixin] 組件所注入的Mixin對象
8.data:Object 組件需要響應的事件列表
9.methods:List 組件需要響應的事件列表
10.props:List 組件允許傳遞的props列表
11.events:List 組件通信時所需要的事件表現
//方法
1.setData(key:String|Object, [value:Object]) 對原有小程序的setData的封裝(wepy的贓查檢流程會自動執行setData操作，一般不需要使用)
2.getCurrentPages()
3.$getComponent(com:String) 通過組件名稱路徑查找組件對象
4.$invoke(com:String|Component) 調用另一組件的方法。優先調用methods中方法，如果方法不存在，則調用組件的自定義方法，調用自定義方法時，不會傳遞事件$event。
5.$broadcast(eventName:String,[args]) 組件發起一個廣播事件
向所有子組件發起一個廣播事件，事件會依次傳播直至所有子組件遍歷完畢或者事件被手動終止傳播。
6.$emit(eventName:String,[args]) 組件發起一個冒泡事件
向父組件發起一個冒泡事件，事件會向上冒泡直至Page或者者事件被手動終止傳播。
7.$apply([func:Function]) 組件發起臟檢查
正常流程下，改變數據后，組件會在流程結束時自動觸發臟檢查。 在異步或者回調流程中改變數據時，需要手動調用$apply方法。
this.userName = 'Gcaufy';
this.$apply();
this.$apply(() => {
this.userName = 'Gcaufy';
});
8.$nextTick(func:Function) 組件數據綁定完成后的回調事件
數據綁定后的回調事件，在不傳入function時，返回一個promise對象
this.userName = 'Gcaufy';
this.$nextTick(function () {
console.log('UI updated');
});
this.userName = 'Gcaufy';
this.$nextTick().then(function () {
console.log('UI updated');
});
//wepy.page Class
//屬性 全部屬性繼承自wepy.component
//方法
1.$preload(key:String|Object, value:Object]) 給頁面加載preload數據
加載preload數據后，跳轉至另一個頁面時，在onLoad方法中可以獲取到上個頁面的preload數據。
// page1.js
this.$preload('userName', 'Gcaufy');
this.$redirect('./page2');
// page2.js
onLoad (params, data) {
console.log(data.preload.userName);
}
2.$redirect(url:String|Object, [params:Object]) wx.redirectTo的封裝方法
this.$redirect('./page2', {a: 1, b: 2});
this.$redirect({
url: './pages?a=1&b=2'
});
3.$navigate(url:String|Object,[params:Object]) wx.navigateTo的封裝方法
4.$switch(url:String|Object) wx.switchTab的封裝方法
// wepy.event Class 小程序事件封裝類
new wepy.event(name:String, source:Component, type:String)
//屬性
1.name(String) 事件名稱
當事件為小程序原生事件時，如tap，change等，name值為system。 當事件為用戶自定事件或者組件通信事件時，如$emit，$broadcast等，name值為自定事件的名稱。
2.source(Component) 事件來源組件
無論是小程序原生事件還是自定事件，都會有對應的事件來源組件。
3.type(String) 事件類型
$emit事件中，type值為emit。bindtap事件中，type值為tap。
//方法
1.$destory() 終止事件傳播
在$emit或者$broadcast事件中，調用$destroy事件終止事件的傳播。
2.$transfor(wxevent:Object) 將內部小程序事件的屬性傳遞到當前事件
6-wepy注意事項
與Vue開發不同之處
1、methods方法使用不同：methods方法中只用于聲明頁面wxml中標簽的bind、catch事件，自定義方法需以自定義方法的方式聲明。
2、命名規范不同：template里面組件組件標簽命名使用駝峰式命名(即comChild),而不是短橫杠式命名(com-child)。
3、響應事件順序不同：對于組件methods響應事件，以及小程序頁面事件將采用兼容式混合，
即先響應組件本身響應事件，然后再響應混合對象(mixin)中響應事件。
注意，這里事件的執行順序跟Vue中相反，Vue中是先執行mixin中的函數， 再執行組件本身的函數。
4、wepy中也有computed,props,slot,data,watch等vue中有的一些屬性(沒有filter, directive)
props,slot,data,watch和vue基本無異，其中computed計算屬性是無法傳參的。
5、wepy中props傳遞需要加上.sync修飾符(類似VUE1.x)才能實現props動態更新，
并且父組件再變更傳遞給子組件props后要執行this.$apply()方法才能更新。
關于props動態傳值，可以通過設置子組件props的twoWay: true來達到子組件數據綁定至父組件的效果。
那如果既使用.sync修飾符，同時子組件props中添加的twoWay: true時，就可以實現數據的雙向綁定了。
6、wepy支持數據雙向綁定，子組件在定義props時加上twoway:true屬性值即可實現子組件修改父組件數據。
7、VUE2.x推薦使用eventBus方式進行組件通信，而在wepy中是通過$broadcast，$emit，$invoke 三種方法實現通信。
8、VUE的生命周期包括created、mounted等，wepy僅支持小程序的生命周期：onLoad、onReady等。
9、wepy不支持過濾器、keep-alive、ref、transition、全局插件、路由管理、服務端渲染等VUE特性技術。
與原生開發不同之處
1、數據綁定寫法不一：this.title = 'this is title'; 替換 this.setData({title: 'this is title'});
注意：在異步函數中更新數據的時候，必須手動調用$apply方法，才會觸發臟數據檢查流程的運行。
setTimeout(() => {
this.title = 'this is title';
this.$apply();
}, 3000);
2、組件的循環渲染新增repeat標簽，其中該標簽不能添加類名，即不能添加樣式。
3、wepy框架對原生API請求進行封裝了，可以使用攔截器就行攔截。
4、wepy框架封裝的方法都是Promise，不是Object，一些原生方法返回的是Object，可以直接獲取到方法的返回對象。
7-wepy報錯記錄
1. 記錄一：wepy.getUpdateManager()是Promise，不是對象
8-wepy踩坑記錄
官方已經特別指出并給出解決辦法
1、在部份機型上使用display: flex;會出現兼容性問題
官方指出鏈接
解決辦法：使用less時，建議加上autoprefix插件，步驟如下：
一、安裝插件
npm install less-plugin-autoprefix --save-dev
二、配置插件 在wepy.config.js中加入
const LessPluginAutoPrefix = require('less-plugin-autoprefix');
compilers: {
less: {
compress: true,
plugins: [new LessPluginAutoPrefix({browsers: ['Android >= 2.3', 'Chrome > 20', 'iOS >= 6']})]
}
一些自己遇到的問題以及給出解決辦法
1、BindInput與async沖突
微信小程序的bindinput：鍵盤輸入時觸發，event.detail = {value, cursor, keyCode}，keyCode 為鍵值，2.1.0 起支持，處理函數可以直接 return 一個字符串，將替換輸入框的內容。
當回調函數被async修飾，返回的會是promise，這導致輸入框內容被替換。
只好先調用一個普通的函數，然后再調用async函數。
// template
// methods input的內容會被改變
methods = {
async searchInput(e) {
let value = e.detail.value;
// some code using await
// ……
}
}
// fix
methods = {
searchInput(e) {
let value = e.detail.value;
// ……
this.f();
// ……
}
}
// 自定義方法直接定義在類中，不能放在methods下
async f()
{
// ……
}
總結
以上是生活随笔為你收集整理的wepy公共样式_wepy框架开发小程序文档的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 7 php程序的调试方法_PHP程序错误
- 下一篇： opendolphin_使用Dolphi