微信小程序开发实践

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. 代码示例

• 首页加载数据示例

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo=" getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>

  <view>
    <navigator url="/pages/form/form" open-type="navigate">跳转到form页面</navigator>
  </view>

</view>

 

• request请求示例

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: []
  },

  loadList: function(e) {
    var list;
    wx.request({
      url: "https://www.xxx.com/getList.json",
      success: function (res) {
        list = res.data.list
        console.log(list);
        var currentPage = getCurrentPages()[getCurrentPages().length-1];
       // 设置页面数据
        currentPage.setData({
          list: list
        });
      }
    });
  }
})

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

 

• 组件使用示例

<!--pages/phoneNum/phoneNum.wxml-->
<text>phoneNum</text>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
<button bindtap='getMobile'>获取手机号</button>

<!--客服会话组件，二选一-->
<button open-type='contact' bindcontact='' session-from='xxx'>进入客服会话</button>
<contact-button session-from='xxx'>客服</contact-button>