zoukankan      html  css  js  c++  java
  • 微信小程序开发实践

    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>

      

  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/ylty/p/9104102.html
Copyright © 2011-2022 走看看