微信小程序开发

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
Made with Slides.com