微信小程序开发总结

Posted 2020-08-20 wujiaolong

一、设计

无需开发者开发的

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、页面路由

 

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. 的错误