一、设计
无需开发者开发的
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

微信小程序开发总结的更多相关文章

  1. 《腾讯游戏人生》微信小程序开发总结

    为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...

  2. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  3. 微信小程序开发 -- 01

    微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...

  4. 微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

    最近帮人家做一个微信小程序,刚好想熟悉一下.由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式. 后台服务器是windows server,后台程序是.Net  WebA ...

  5. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  6. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  7. 微信小程序开发——开发者工具中素材管理功能使用的注意事项

    为什么使用“素材管理”: 微信小程序环境中本地资源图片是无法通过 WXSS 获取的,可以使用网络图片,或者 base64,或者使用<image/>标签.. 当然,如果不想这么麻烦,你可能会 ...

  8. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序开发及相关设置小结

    今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...

  10. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

随机推荐

  1. 深入浏览器兼容 细数jQuery Hooks 属性篇

    关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...

  2. 10年C#历程的MVP之路与MVP项目介绍

            本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html  1.意外的惊喜 10月份收到微软总部寄来的荣誉证书,非常激动, ...

  3. QuickContactBadge去掉三角

    我们首先来分析一下QuickContactBadge源码 在QuickContactBadge构造函数中会给mOverlay赋值 private Drawable mOverlay; public Q ...

  4. Vim 快速上手

    1.vi的基本概念 基本上vi可以分为三种状态,分别是 命令模式(command mode) 插入模式(Insert mode) 底行模式(last line mode) 1) 命令行模式comman ...

  5. 计时器StopWatch示例

    计时器 StopWatch stwatch = new StopWatch(getClass().getSimpleName()); try{ stwatch.start(joinPoint.getS ...

  6. 怎样录制屏幕并将结果保存为Gif

    怎样录制屏幕 并将结果保存为GIF 大前天写文章,需要把PPT的翻转页面截成动态图.我一开始就想到保存文件肯定是GIF.但是如何生成呢?素材又从哪里来?以前自己感兴趣做过把一组连拍的图片做成动态图,再 ...

  7. C++继承和多态

    继承 访问控制 基类的成员函数可以有public.protected.private三种访问属性. 类的继承方式有public.protected.private三种. 公有继承 当类的继承方式为pu ...

  8. Struts2环境下Tomcat启动异常:Exception starting filter struts2,报了一个java.lang.ClassNotFoundException

    在写一个struts2+hibernate整合的小例子时,启动Tomcat服务器,报了一个: 严重: Exception starting filter struts2java.lang.ClassN ...

  9. L2/L3/L4 Switch简介

    第二层交换机,是根据第二层数据链路层的MAC地址和通过站表选择路由来完成端到端的数据交换的.因为站表的建立与维护是由交换机自动完成,而路由器又是属于第三层设备,其寻址过程是根据IP地址寻址和通过路由表 ...

  10. 【字符编码】Java字符编码详细解答及问题探讨

    一.前言 继上一篇写完字节编码内容后,现在分析在Java中各字符编码的问题,并且由这个问题,也引出了一个更有意思的问题,笔者也还没有找到这个问题的答案.也希望各位园友指点指点. 二.Java字符编码 ...