微信小程序开发总结

1、设计
无需开发者开发的
一、小程序加载动画;
二、页面下拉刷新加载样式;
三、微信控件(拥有完整的操做反馈);如弹出框、通知、模态框。。。
 
建议用微信本身的
一、加载、反馈样式(全局、局部)
2、开发

一、注册小程序css

在app.js中,经过app函数
App({
//生命周期
onLaunch:function(){},
onShow:function(){},
onHide:function(){}
})
 
二、注册页面
Page({
data:{},
onLoad:function(){},
onReady:function(){},
onShow:function(){},
onHide:function(){},
onUnload:function(){},
onPullDownRefresh(){},
onReachBottom(){}
})
 

三、配置页面vue

       在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小程序react

github地址:
https://github.com/weui/weui-wxss.git
相关文章
相关标签/搜索