首页 > 代码库 > 微信小程序开发总结

微信小程序开发总结

2024-08-22 07:40:45   224人阅读

一、设计
无需开发者开发的
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="http://www.mamicode.com/header.wxml"/>
<view>body</view>
<include src="http://www.mamicode.com/footer.wxml"/>
 
import是导入模板的
比如定义了一个模板
<!-- item.wxml  -->
<template name="item">
<text>{{text}}</text>
</template>
 
在index.wxml中引用
<import src="http://www.mamicode.com/item.wxml"/>
<template is="item" data=http://www.mamicode.com/{{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. 的错误
 

微信小程序开发总结


联系
我们