微信小程序开发总结

一、设计

无需开发者开发的

1、小程序加载动画；

2、页面下拉刷新加载样式；

3、微信控件（拥有完整的操作反馈）；如弹出框、通知、模态框。。。

 

建议用微信自己的

1、加载、反馈样式（全局、局部）

二、开发

1、注册小程序

在app.js中,通过app函数

App({

//生命周期

onLaunch:function(){},

onShow:function(){},

onHide:function(){}

})

 

2、注册页面

Page({

data:{},

onLoad:function(){},

onReady:function(){},

onShow:function(){},

onHide:function(){},

onUnload:function(){},

onPullDownRefresh(){},

onReachBottom(){}

})

 

3、配置页面

       在app.json的pages中写上自己的页面路径

 

4、页面路由

 

 　　1、不像react、vue那样需要单独的路由，小程序已经帮咱们集成了路由，依赖<navigator url=‘’></navigator> 进行页面跳转，js端也可用 wx.navigateTo({url:'',success:''})、wx.redirectTo(url:'',success:'');进行跳转

注意两者区别，前者在新页面打开（小程序只允许最多打开5层），后者则是覆盖之前的页面。

      2、对于全局的数据、页面的公共逻辑判断（如进入页面时的权限验证、登录判断），则可以卸载app.js中，其他页面中可以通过app.xxx方法获取

 

5、事件

　　事件写法类似于vue和react组件的事件

　　绑定事件用：bindtap、binglongtap

　　阻止事件冒泡用：catchtap

 

6、支持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'}}/>

 

三、开发中遇到的问题

　　1、 经测试无法导入第三方css，机制受到限制

　　2、css 只能使用线上图片或者base64，无法使用本地图片（因为小程序有1兆的体积限制），除非是用image组件（此处image已经被小程序重写成了自定义组件而非原来的组件）

　　3、每个页面的XXX.js不能为空，否则下面会出现  1. Forgot to add page route in app.json. 2. Invoking Page() in async task. 的错误

 

四、以下是本人总结的官方样例，在开发者工具中打开即可运行,样例代码在官方基础上稍作改动，如果对你有帮助请点star

　　github地址：

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

 样例图：

五、不重复造轮子之weui for小程序

github地址：

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