码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发

时间:2018-05-29 11:55:49      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:href   tail   use   closed   children   上线   基础   本地   var   

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

 

  

微信小程序开发

标签:href   tail   use   closed   children   上线   基础   本地   var   

原文地址:https://www.cnblogs.com/ylty/p/9104102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!