傷不起的微信小程序

 

 先說一些你們上手小程序時都會問到的問題：

Q：小程序能夠和現有的App 打通嗎？
A：小程序能夠藉助微信聯合登陸，和開發者已有的App 後臺的用戶數據進行打通，但不會支持小程序和App 直接的跳轉。
Q：微信已經有了訂閱號、服務號、企業號，小程序和這三者有什麼不一樣？
A：小程序、訂閱號、服務號、企業號是並行的體系。
Q：小程序能夠我的開發嗎？
A：小程序容許我的開發，只是我的開發是不能發佈的，而且想在真機上看到的話，在建立小程序時就得填上你申請好的appid。
Q：小程序須要付費嗎？
A：我的是不須要的，公司的須要一個被認證過的微信服務號，不需再付額外的費用（須要注意小程序申請時名字及icon的確認）。
開始正題：重要的事情說n遍（認真看文檔，仔細看文檔，認真仔細看文檔，雖然微信的官方文檔寫的不清不楚）。長度單位基本使用rpx（這是小程序特有的單位，能夠理解爲一個百分比），它是把屏幕寬分爲750等份，因此咱們在開發時，最好要求UI設計師提供750px寬度的圖，而後在iPhone6上面開發。在這咱們得注意一個點，模擬器上面的UI展現效果和真機上的有時仍是有差異的，因此咱們在模擬器上調試後好，必定要用不一樣真機看看效果，必要時能夠根據不一樣機型稍做調整（蘋果手機還好，若是是安卓手機，對於點點ui問題就不必太糾結了。。。怕你會瘋）。
生命週期的注意：下面圖片裏的兩個數組，它們的做用域都是本頁面，可是它們的生命週期是不一樣的。dataList1的生命週期同小程序的生命週期，也就意味着你每次退出頁面時，要在onUnload: function () {}函數中使之置空，要不會有數據的疊加發生（對於像BOOL值的判斷也需注意）。dataList2的生命週期同本頁的生命週期，因此不須要手動管理。全局屬性或函數，請在app.js裏申明，配合var app = getApp()使用。


小程序如今的入口有：微信客戶端-發現-小程序；我的或羣裏分享（不支持盆友圈分享）；掃碼進入。
咱們主要看看後面兩種方法的實現，分享主要調用onShareAppMessage函數，請看下面的截圖。



這裏要特別注意兩點：在咱們的小程序未上線時，一次最多隻支持5個連接的使用。在使用連接生成二維碼以前，要先去後臺-設置-開發設置-服務器域名-request合法域名裏，配置好連接域名。若是你的連接是帶參數的，那麼必定要注意，生成二維碼時參數也必須同樣。當咱們的小程序上線後，就沒有這麼多限制了，只需設置規則及功能頁面就能夠了，這也就意味着咱們線上版生成的二維碼裏的參數能夠隨便改，達到掃不一樣的二維碼，進入的界面裏的數據都不同的效果。
好了，轉發及二維碼的生成咱們都會了，如今來看看怎麼在程序中怎麼接收這些參數，而後去使用（看下圖）：


注意點：在onLoad函數中設置參數（options，自定義）接收，二維碼連接內容會以參數q（只能用q去接收）的形式帶給頁面，在onLoad事件中提取"q"參數並自行UrlDecode一次，便可獲取原二維碼的完整內容。
工具類的使用：經常使用的方法能夠放在util.js裏面，方便管理和使用。例如調用裏面的網絡請求方法： 
var request = require('../../../utils/util.js')； 
request.httpsGetRequest(url, dic, function (success) { }）；
module.exports = {
formatTime: formatTime,
getWindowWidth: getWindowWidth,
getWindowHeight: getWindowHeight,
showStyle: showStyle,
useScanCode: useScanCode,
httpsGetRequest: httpsGetRequest,
httpsPostRequest: httpsPostRequest
}

function getWindowWidth() {
var num = 0
wx.getSystemInfo({
success: function (res) {
num = res.windowWidth
}
})
return num;
function showStyle(title, content) {
console.log('showStyle')
wx.showModal({
title: title,
content: content,
success: function (res) {
if (res.confirm) {
console.log('用戶點擊肯定')
} else {
console.log('用戶點擊取消')
//GET請求
function httpsGetRequest(req_url, req_obj, res_func) {
var jsonUrl = {
url: req_url,
header: { "Content-Type": "application/json" },
method: "GET",
success: function (res) {
typeof res_func == "function" && res_func(res.data);
}
}
if (req_obj) {
jsonUrl.data = req_obj;
wx.request(jsonUrl);
想要學習前端開發的同窗，能夠加羣：434623999 學習哦！