微信小程序开发

Posted 2020-11-09 风小雅

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 })

View Code

 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>

View Code

• 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 })

View Code

1 <button bindtap="loadList">加载数据列表</button>
2 <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item">
3 {{item.title}}
4 </view>

View Code

• 组件使用示例

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>

View Code