微信小程序開放功能

微信小程序開放功能

草民看過不少的文檔，微信的官方文檔寫的着實不錯了，草民真是發自心裏誇讚一下騰訊的這個能力，你們能夠前往閱讀，下面經過一張圖來總覽一下小程序開放的功能：

功能解讀：

微信小程序在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、音頻播放、地理位置、完成任務和本地提醒。

七、禁止多媒體好比音頻、視頻的自動播放。