微信小程序開發總結

1、設計

無需開發者開發的

一、小程序加載動畫；

二、頁面下拉刷新加載樣式；

三、微信控件（擁有完整的操做反饋）；如彈出框、通知、模態框。。。

 

建議用微信本身的

一、加載、反饋樣式（全局、局部）

2、開發

一、註冊小程序

在app.js中,經過app函數

App({

//生命週期

onLaunch:function(){},

onShow:function(){},

onHide:function(){}

})

 

二、註冊頁面

Page({

data:{},

onLoad:function(){},

onReady:function(){},

onShow:function(){},

onHide:function(){},

onUnload:function(){},

onPullDownRefresh(){},

onReachBottom(){}

})

 

三、配置頁面

       在app.json的pages中寫上本身的頁面路徑

 

四、頁面路由

 

 　　一、不像react、vue那樣須要單獨的路由，小程序已經幫我們集成了路由，依賴<navigator url=‘’></navigator> 進行頁面跳轉，js端也可用 wx.navigateTo({url:'',success:''})、wx.redirectTo(url:'',success:'');進行跳轉

注意二者區別，前者在新頁面打開（小程序只容許最多打開5層），後者則是覆蓋以前的頁面。

      二、對於全局的數據、頁面的公共邏輯判斷（如進入頁面時的權限驗證、登陸判斷），則能夠卸載app.js中，其餘頁面中能夠經過app.xxx方法獲取

 

 

五、事件

　　事件寫法相似於vue和react組件的事件

　　綁定事件用：bindtap、binglongtap

　　阻止事件冒泡用：catchtap

 

六、支持import和include

 

<include src="header.wxml"/>

<view>body</view>

<include src="footer.wxml"/>

 

import是導入模板的

好比定義了一個模板

<!-- item.wxml  -->

<template name="item">

<text>{{text}}</text>

</template>

 

在index.wxml中引用

<import src="item.wxml"/>

<template is="item" data={{text:'foobar'}}/>

 

3、開發中遇到的問題

　　一、 經測試沒法導入第三方css，機制受到限制

　　二、css 只能使用線上圖片或者base64，沒法使用本地圖片（由於小程序有1兆的體積限制），除非是用image組件（此處image已經被小程序重寫成了自定義組件而非原來的組件）

　　三、每一個頁面的XXX.js不能爲空，不然下面會出現  1. Forgot to add page route in app.json. 2. Invoking Page() in async task. 的錯誤

 

4、如下是本人總結的官方樣例，在開發者工具中打開便可運行,樣例代碼在官方基礎上稍做改動，若是對你有幫助請點star

　　github地址：

　　https://github.com/gitwujiaolong/xiaochengxu_demo.git

 樣例圖：

 

 5、不重複造輪子之weui for小程序

github地址：

https://github.com/weui/weui-wxss.git