微信小程序开放功能

微信小程序开放功能

草民看过不少的文档，微信的官方文档写的着实不错了，草民真是发自心里夸赞一下腾讯的这个能力，你们能够前往阅读，下面经过一张图来总览一下小程序开放的功能：

功能解读：

微信小程序在UI部分沿用了本身weui的基础样式，且因为小程序依托于微信app，这样小程序就的不少api能够以桥接的方式来调用原声接口，包括导航、地图、选择图片、IO、网络、登陆、支付等功能必然都是经过桥接来实现的，这也是小程序相比应用号和其余webapp的优点~

微信小程序跨平台动态化方案

因为微信小程序源码并未开源，关于微信小程序采用的动态化原理你们也都在猜想中，先简单普及一下最新的两种动态化方案：

hybird

采用传统htm+css+js的框架进行开发：

优势：

1.简单 快速，模版布局现成，熟练的H5开发工程师均可以胜任 
2.颠覆性的react框架的出现以后引入了Virtual DOM的概念，强大的DOM diff操做是UI更新更加流畅

缺点：

1.渲染速度与性能方面的表现依然与原声相差甚远 
2.从内存方面的考虑，列表复用问题没法解决

* React Native 与 Weex*

优势：

1.开发沿用html或xml+css+js的方式，可是经过transform层将html 与 css 转换成Virtual DOM，native端进行映射渲染，性能方面大可没必要担忧。 
2.在native端植入了JS引擎，这样就能够扩展native api，调用一些系统权限或者扩展功能，例如选择图片。

缺点：

1.虽然沿用了前端传统开发方式，可是现阶段的html或xml与css的标准性是不够的，包括svg 、css绘制图标等 
2.须要了解部分的native知识，对开发效率方面是一个下降

经过上面两种方案的比较，我的仍是更倾向于后者的，毕竟性能问题依然是很重要的，最初也猜想微信小程序选择的是后者，毕竟开放功能里面有不少是native才拥有的能力。

… 
可结论要让你们失望了，微信小程序采用的是前者，有不少人依然不相信，说我强大的腾讯帝国不可能选择落后的方案，来看一张图片：

了解android的人都知道上图的意思，不过为了给其余工种程序员讲解，仍是简单介绍一下这个功能，在android的开发者功能里边有一个显示布局边界的设置，这个功能能够把全部android原声控件的布局边界都显示出来，而上图的navigationBar与底部的bottomBar都是原生的，可是中间大部份内容都是webview，也证实了以前的观点，微信小程序采用的是Hybird方式。

---

不少人要开始吐槽说，说草民你讲这些没用啊，咱们又不关心原理，咱们只想吃肉，无论是那头猪身上的，有那么一句话，不想当不想当厨子的裁缝不是好司机，想必你们不会想一直站在别人的肩上写代码吧，但愿你们可以领悟到草民作这么多铺垫的意义。好吧，话很少说，接下来咱们正式开始小程序的讲解。

开发准备

1、下载开发工具

连接地址

2、添加项目

3、填写项目信息

appid是小程序的，若是没有的话，选择无APPID，填写完成以后点击添加项目便可~

项目架构

程序主体

一、app.js ： 主要存放一些公共的业务逻辑，或者监听小程序声明周期等操做

注：在任意一个page的js中，均可以经过调用getApp()获取app.js对象

App({
  onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: 'I am global data' })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

操做：

一、App.prototype.getCurrentPage()

getCurrentPage() 函数用于获取当前页面的实例。

二、getApp()

咱们提供了全局的 getApp() 函数，能够获取到小程序实例。

// other.js var appInstance = getApp() console.log(appInstance.globalData) // I am global data

• 1
• 2
• 3

注意：

1. App() 必须在 app.js 中注册，且不能注册多个。
2. 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就能够拿到 app 实例。
3. 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 尚未生成。
4. 经过 getApp() 获取实例以后，不要私自调用生命周期函数。

二、app.json ： 设置界面组成、公共窗口展示、底部tabbar样式、超时时间等

{
  "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

三、 app.wxss : 配置公共样式

定义在 app.wxss 中的样式为全局样式，做用于每个页面~

.container { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

页面

对于小程序不少人有一个错觉，那就是小程序是用html5，这个真说错了，看看页面的架构， 小程序是微信全新定义的规范，是基于XML+JS的，不支持也不兼容HTML，兼容受限的部分CSS写法。

上图的小程序的page目录，后缀名分别是wxml、wxss和js，不过微信对wxml的全称定义也不是weixin xml，而是WeiXin Markup Language，同时wxss也是WeiXin Style Sheets，也说明了小程序开发将是脱离传统前端开发的一种形态，下文介绍四部分的详细应用~

index.json :

界面的配置，只能设置 window 相关的配置项，以决定本页面的窗口表现，包括navigationBar的标题、背景、颜色及是否容许下拉等

{
  "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

注意： 
为了方便开发者减小配置项，规定描述页面的这四个文件必须具备相同的路径与文件名。

简单示例

1、 编写app.js

//app.js App( { getUserInfo: function( cb ) { var that = this if( this.globalData.userInfo ) { typeof cb == "function" && cb( this.globalData.userInfo ) } else { //调用登陆接口 wx.login( { success: function() { wx.getUserInfo( { success: function( res ) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb( that.globalData.userInfo ) } }) } }) } }, globalData: { userInfo: null, }, }) 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

2、配置app.json

增长我的中心界面

{
    "pages": [ "pages/mine/index" ], "window": { "backgroundTextStyle": "light", "backgroundColor": "#ffffff", "navigationBarBackgroundColor": "#0092ff", "navigationBarTitleText": "滴答宝", "navigationBarTextStyle": "white" } } 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

3、编写我的中心界面

目录结构以下：

一、index.wxml

<!--index.wxml--> <toast hidden="{{toastHidden}}" duration="1000" bindchange="toastChange">{{toastContent}}</toast> <view class="container"> <view bindtap="headTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <block wx:for-index="index" wx:for="{{userListInfo}}"> <view data-index="{{index}}" bindtap="cellItemClick" class="weui_cell" style="margin-top:{{item.margin}};"> <view wx:if="false" class="weui_cell_hd"> <image src="{{item.icon}}"></image> </view> <text class="tv_cell_left"> {{item.leftItem}} </text> <text wx:if="{{item.rightItem}} == null" class="tv_cell_right">{{item.rightItem}}</text> <view wx:if="{{item.showArrow}}" class="iv-arrow"></view> </view> </block> <view class="v_below"> <text class="tv_server_time">客服电话 400-686-1179</text> <text class="tv_server_time">服务时间 10:00~22:00</text> <text class="tv_server_time">官方邮箱 dida@shuidihuzhu.com</text> </view> </view> 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

二、index.wxss

.container { background-color: #F2f2f2; } .userinfo { display: flex; flex-direction: column; padding: 50rpx 0; align-items: center; background: #0092ff; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #333; } .weui_cell { position: relative; display: flex; padding: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #dadada; background-color: white; } .weui_cell_hd image { width: 100%; height: 20px; vertical-align: -2px; } .tv_cell_left { position: absolute; font-size: 30rpx; color: #333; left: 20rpx; } .tv_cell_right { position: absolute; font-size: 28rpx; color: #999999; right: 50rpx; } .iv-arrow { position: absolute; right: 30rpx; border-top: 2rpx solid #c7c7c7; border-right: 2rpx solid #c7c7c7; width: 16rpx; height: 16rpx; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .v_below { display: flex; flex-direction: column; align-items: center; } .tv_server_time { font-size: 28rpx; color: #999999; margin-top: 20rpx; } 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77

三、index.js

var app = getApp() Page( { data: { userInfo: {}, toastHidden: true, toastContent: '', userListInfo: [ { leftItem: '个人帐户', showArrow: true, }, { leftItem: '邀请好友 （一块儿赚钱）', margin: '20rpx', showArrow: true, }, { leftItem: '个人业绩', showArrow: true, }, { leftItem: '用户协议', margin: '20rpx', showArrow: true, }, { leftItem: '当前版本', rightItem: 'V 1.0.0 (内测版)', margin: '20rpx', showArrow: false, }] }, onLoad: function() { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo( function( userInfo ) { //更新数据 that.setData( { userInfo: userInfo }) }) }, toastChange: function() { this.setData( { toastHidden: true }) }, headTap( e ) { //更新数据 this.setData( { toastHidden: false, toastContent: "点击头部" }) }, cellItemClick( e ) { var index = e.currentTarget.dataset.index console.log( "index = " + index ) //更新数据 this.setData( { toastHidden: false, toastContent: "点击" + index }) }, }) 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65

总体代码十分简单，这里只是想让您看到基本的效果演示，若是须要更深层次的使用，你们还请到官方文档阅读，相信您几个小时就能够搞定，简单的集成演示就介绍到这里~

---

技术缺陷

必定会有人发出疑问，微信小程序就那么优秀吗？没有问题、没有坑吗？

答：确定是有的，在这里草民表达一下本身对程序框架的看点，代码世界的框架只有两种，第一种是每天被吐槽的，第二种是没人用的，但愿你们仍是要以发现美的眼光去看待一个框架，同时还要用挑剔的眼光去审视一个框架，采用发现问题，提出问题，解决问题的方式进行优化。

下面我介绍点在微信小程序开发时一些不爽的地方，其余问题都是能够解决的，草民只是提几个代码层级的问题，这也是我最注重的：

一、操做反馈组件

小程序提供了四种操做反馈组件，action-sheet、modal、toast、loading，想法很好，并且多数框架都有，可草民不理解的就是，您不能封装成module来使用吗？

看下官方使用方式：

我但愿的方式是这样的：

var toast = require('@wx-module/model') modal.toast({ 'message': ‘toast 消息内容’, 'duration': 1000 })

• 1
• 2
• 3
• 4
• 5
• 6

不知道你们的想法是怎样的，反正草民是很是遵循傻瓜式编程的~

二、template 模板封装

和你们代表一下，小程序的template模板只支持wxml的引入，并不支持具体的业务逻辑与css样式，这也是本人接受不了的现实，我想封装一个组件，组件中没有业务逻辑，我管他叫什么？组件化开发是这样定义的吗？但愿腾讯下一版本迭代是将此问题解决。

三、不支持配置别名，只能采用相对路径的方式进行require

看一下require的方式：

var router = require('../../config/router.js')

• 1

草民想冒昧问一句，这个../..您看着爽吗，和下面这个好比何？

var router = require('root/config/router.js')

• 1

四、适配方案 rpx（responsive pixel）

微信小程序新定义了一个尺寸单位，能够适配不一样分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

项目中我大多数都采用rpx进行适配，可是有时1rpx有时显示不出来，并且当我设置750rpx时，在android手机显示不满一屏，就是说在android屏幕上并无按照模板750rpx进行适配或者说适配方案存在问题，也但愿开发者在使用时注意。

---

运营问题：

送你们一个彩蛋吧，在这里提醒一下你们运营小程序时可能出现的问题，但愿你们在运营时避免如下几点，防止犯一些没必要要的错误致使影响运营效果与项目进度~

提交「小程序」时须要注意哪些地方，才不会被拒？

一、小程序的名称必须和所提供的服务有所关联，并且必须是两个词以上的组合，不能使用普遍使用不具有识别性的词语来命名，好比日历、电话。

二、提交小程序审查时，头像 LOGO 要尽可能使用清晰度高的图片，这个清晰度是指能够看清、分别、图片中包含的元素，不然微信不予经过。

三、微信但愿，用户打开小程序的时候直接就能使用到相关的功能，所以这份文档提到，用户在小程序的页面就能使用到相关的服务，不能隐藏，也不能进行屡次跳转。有特别规定，「小程序首页必须可以直达或者通过 2 次点击到达」相关的功能。

四、小程序的功能不能过于简单，好比说只有一个页面，或只提供一个按钮。

五、小程序不能展现、推荐第三方小程序，不能作小程序导航、互推、小程序排行榜等。也不能经过小程序来搜索其它小程序。

六、用户使用小程序时，不能以关注或使用其它小程序做为条件。

七、禁止诱导分享，这个不用再说，微信对此一直严厉打压。

八、小程序不能用做营销活动、广告用途，不能存在相似算命、星座运势之类的测试类内容，不能包含赌博竞猜抽奖等内容。

九、小程序里面的图片，不能包含广告、网址。

运营「小程序」的时候，须要注意哪些地方，才不会下架？

一、微信不容许批量注册、重复提交大量相似的小程序。

二、小程序的添加，不能设置付费，必须是免费添加。

三、若是你的微信小程序含有支付功能，须要在简介当中明确指示。

四、若是你但愿经过小程序创业，须要注意：若是小程序所属的公司被收购或合并，你从微信和微信小程序接收的小程序里继续使用。

五、若是小程序使用到地理位置定位功能，在采集、 获取用户地理位置时必须获得用户的赞成。

六、小程序后台服务，仅限于集中目的：VoIP、音频播放、地理位置、完成任务和本地提醒。

七、禁止多媒体好比音频、视频的自动播放。