微信小程序开发

1、微信小程序与H5的区别

• 不是H5网页，而是基于“微信OS”的应用程序
• 自定义元素标签<view> <text> <swiper>
• 无法使用浏览器中的window对象和document对象
• C/S架构本地安装，断网也可以使用

2、微信小程序框架-文件结构

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html?t=20161229

• 主体部分-app
• 页面部分-page

3、微信小程序-逻辑层

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html?t=20161229

• APP()-小程序的入口

• Page()-页面入口

• 数据绑定、事件分发、生命周期管理、路由管理

4、微信小程序-传参

• 自定义的data-xx属性为点击事件传递属性

4、微信小程序-传参

• 页面URL传参

4、微信小程序-传参

• 缓存传参

5、微信小程序-模块化

• module.exports

6、微信小程序-视图层

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/?t=20161229

• WXML-数据绑定、列表渲染、条件渲染、模板（template）、组件（slot）、引用（import）

• WXSS-自适应单位rpx（1rpx=2px）

7、微信小程序-组件

https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html?t=20161229

• 视图容器<view> <scroll-view>
• 表单组件<input> <checkbox> <radio>
• 导航<navigator>
• 画布<canvas>
• 地图<map>
• 媒体<video>支持mp4和m3u8格式
• H5支持 <web-view>-内嵌H5须在微信后台进行配置，并在H5服务器根目录添加校验文件，window.__wxjs_environment === 'miniprogram’可以判断是否在小程序内部

8、微信小程序-API

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html?t=20161229

• 网络请求wx.request
• 媒体播放停止wx.chooseImage、wx.startRecord、wx.chooseVideo
• 文件上传下载wx.downloadFile、wx.uploadFile
• 数据缓存wx.setStorage
• 位置信息wx.getLocation
• 设备信息wx.getSystemInfo、wx.getNetworkType
• 界面交互wx.showModal、wx.navigateTo
• 绘图wx.createCanvasContext
• 开放微信接口-用户信息、微信支付

9、微信小程序-扫普通链接二维码打开小程序

https://mp.weixin.qq.com/debug/wxadoc/introduction/qrcode.html#功能介绍

• 跳转规则配置 http://jm.jd.com/sign/index.html?id=1
• 域名服务器jm.jd.com/sign文件夹下添加校验文件
• 扫描普通二维码跳转小程序传参

10、微信小程序-约束

https://github.com/justjavac/awesome-wechat-weapp

• 小程序包最大容量为2M
• 本地存储不能超过10M
• 请求不能超过5个request
• 页面跳转不能超过5层

11、微信小程序-工程化构建

• node server-mock数据模拟
• gulp打包
• less预处理

1、微信小程序-登录、埋点

• 京东账号登录授权-京东开普勒 https://k.jd.com联系人：王鸿运（wanghongyun）
• 小程序埋点-大数据平台子午线-联系人：吴凯（bjwkai）http://cf.jd.com/pages/viewpage.action?pageId=79700994