1. 电商小程序研究报告
http://www.cb.com.cn/gdbb/2018_0111/1219592.html
2. 小程序简介
- 2016.9.21开启内测，2017.1.9正式上线，2017.12.28开放了微信小游戏。
- 微信日活9亿，“跳一跳”日活1.7亿。
- 小程序比较火的领域： 工具类 电商类
3. 小程序的优势
- 体量轻，无需安装、卸载。
- 微信给了更方便的入口，用过的小程序容易查找。
- 可以发送服务通知。 小程序可以和公众号相互跳转。
- 小程序可以和app相互跳转。
4. 开发一个小程序
- 下载官方IDE 注册微信小程序账号，获取AppId
- 创建一个 quick start 项目
- 开始写代码 （需要一点HTML+CSS+JS的基础知识）
- 参照微信小程序的API和组件搭积木
- 上传 -> 发布 -> 审核 公众号关联小程序
5. 小程序文件类型
- js ---------- JavaScrip文件
- json -------- 项目配置文件，负责窗口颜色等等
- wxml ------- 类似HTML文件
- wxss ------- 类似CSS文件
6. 小程序开发限制
- 小程序的运行环境不等同于浏览器，所以js中的一些web能力无法使用，如document, window等。
- 小程序不支持cookie，数据存储可以使用本地缓存storage。
-
小程序可以分包加载
- 整个小程序所有分包大小不超过4M。
- 单个分包大小不超过2M。
-
发送模板消息限制：
- 一个prepay_id可以在7天内发送3条消息
- 一个form_id可以在7天内发送1条消息。
-
关于webview：
- 需要添加域名白名单，一个小程序最多添加20个域名白名单；
- 通信只能通过JSSDK，无法共享授权状态。
7. 小程序发布限制
- 开放了个人申请小程序。
- 同一主体最多注册50个小程序。
- 一个小程序有1个管理员，最多绑定10个开发者，20个体验者。
- 一个公众号可关联3个不同主体的小程序，可关注同一主体的10个小程序。
- 一个小程序最多关联3个公众号。
8. 开发文档
https://developers.weixin.qq.com/miniprogram/dev/index.html
9. 代码示例
- 首页加载数据示例
1 //index.js 2 //获取应用实例 3 const app = getApp() 4 5 Page({ 6 data: { 7 motto: ‘Hello World‘, 8 userInfo: {}, 9 hasUserInfo: false, 10 canIUse: wx.canIUse(‘button.open-type.getUserInfo‘) 11 }, 12 //事件处理函数 13 bindViewTap: function() { 14 wx.navigateTo({ 15 url: ‘../logs/logs‘ 16 }) 17 }, 18 onLoad: function () { 19 if (app.globalData.userInfo) { 20 this.setData({ 21 userInfo: app.globalData.userInfo, 22 hasUserInfo: true 23 }) 24 } else if (this.data.canIUse){ 25 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 // 所以此处加入 callback 以防止这种情况 27 app.userInfoReadyCallback = res => { 28 this.setData({ 29 userInfo: res.userInfo, 30 hasUserInfo: true 31 }) 32 } 33 } else { 34 // 在没有 open-type=getUserInfo 版本的兼容处理 35 wx.getUserInfo({ 36 success: res => { 37 app.globalData.userInfo = res.userInfo 38 this.setData({ 39 userInfo: res.userInfo, 40 hasUserInfo: true 41 }) 42 } 43 }) 44 } 45 }, 46 getUserInfo: function(e) { 47 console.log(e) 48 app.globalData.userInfo = e.detail.userInfo 49 this.setData({ 50 userInfo: e.detail.userInfo, 51 hasUserInfo: true 52 }) 53 } 54 })
1 <!--index.wxml--> 2 <view class="container"> 3 <view class="userinfo"> 4 <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo=" getUserInfo"> 获取头像昵称 </button> 5 <block wx:else> 6 <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 7 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 8 </block> 9 </view> 10 <view class="usermotto"> 11 <text class="user-motto">{{motto}}</text> 12 </view> 13 14 <view> 15 <navigator url="/pages/form/form" open-type="navigate">跳转到form页面</navigator> 16 </view> 17 18 </view>
- request请求示例
1 // pages/list/list.js 2 Page({ 3 4 /** 5 * 页面的初始数据 6 */ 7 data: { 8 list: [] 9 }, 10 11 loadList: function(e) { 12 var list; 13 wx.request({ 14 url: "https://www.xxx.com/getList.json", 15 success: function (res) { 16 list = res.data.list 17 console.log(list); 18 var currentPage = getCurrentPages()[getCurrentPages().length-1]; 19 // 设置页面数据 20 currentPage.setData({ 21 list: list 22 }); 23 } 24 }); 25 } 26 })
1 <button bindtap="loadList">加载数据列表</button> 2 <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item"> 3 {{item.title}} 4 </view>
- 组件使用示例
1 <!--pages/phoneNum/phoneNum.wxml--> 2 <text>phoneNum</text> 3 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> 4 <button bindtap=‘getMobile‘>获取手机号</button> 5 6 <!--客服会话组件，二选一--> 7 <button open-type=‘contact‘ bindcontact=‘‘ session-from=‘xxx‘>进入客服会话</button> 8 <contact-button session-from=‘xxx‘>客服</contact-button>