個人微信小程序入門踩坑之旅

前言

更好的閱讀體驗請：個人微信小程序入門踩坑之旅

小程序出來也有一段日子了，剛出來時也留意了一下。不過遇上生病，加上公司裏也有別的事，主要是本身犯懶，就一直沒作。這星期一，趕忙趁着這股熱乎勁，也不是很忙，終於磨磨唧唧的寫了個小demo，（固然還有好多接口沒有使用）。

預計閱讀時間：5min

正文

介紹

小程序的框架，挺像Vue的。

wxml

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

　　

js部分 

// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
}
 
// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})

　　

開發者經過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定，因此在頁面一打開的時候會顯示 Hello WeChat! 

當點擊按鈕的時候，視圖層會發送 changeName 的事件給邏輯層，邏輯層找到對應的事件處理函數
邏輯層執行了 setData 的操做，將 name 從 WeChat 變爲 MINA，由於該數據和視圖層已經綁定了，從而視圖層會自動改變爲 Hello MINA!

工具： 微信 web 開發者工具
我通常在這裏只預覽效果用。

app.json

app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

改變pages裏配置，會更改啓動程序時的主頁面。
window是設置頁面的窗口表現，包括狀態欄，導航欄顏色 等等。
tarbar是底部tab欄的表現。
官方還有 networkTimeout和 debug選項，在這裏沒有配置。
networkTimeout能夠設置各類網絡請求的超時時間。

 

{
"pages": [
"pages/index/other",
"pages/other/index",
"pages/logs/logs",
"pages/login/login",
"pages/douban/douban",
"pages/douban/user",
"pages/other/comment"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3CB371",
"navigationBarTitleText": "Ed Glayxe",
"navigationBarTextStyle": "light",
"backgroundColor": "#3CB371"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "個人",
"iconPath": "images/tabList/my_a.png",
"selectedIconPath": "images/tabList/my_b.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌",
"iconPath": "images/tabList/log_a.png",
"selectedIconPath": "images/tabList/log_b.png"
}, {
"pagePath": "pages/other/other",
"text": "段子",
"iconPath": "images/tabList/joke_a.png",
"selectedIconPath": "images/tabList/joke_b.png"
}, {
"pagePath": "pages/login/login",
"text": "登陸",
"iconPath": "images/tabList/Login_a.png",
"selectedIconPath": "images/tabList/Login_b.png"
}, {
"pagePath": "pages/douban/douban",
"text": "用戶列表",
"iconPath": "images/tabList/user_a.png",
"selectedIconPath": "images/tabList/user_b.png"
}]
}
}

 

　　

頁面文件

app.js、app.json、app.wxss這三個文件是必不可少的文件。.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。這些都是公共文件。
在個人wxss裏引入了weui的wxss 有的頁面使用了它的UI。

Pages 裏面是對應的頁面。每一個對應的頁面裏都有 相應的js wxml wxss文件。對文件進行配置。

在common文件夾了 寫了一個評論template 嘗試了一下引入模板。
在utils裏封裝了一下內部的方法。

問題

在小程序裏支持flex佈局，仍是挺不錯的。
我有時佈局的時候都給寫個html文件，在瀏覽器裏看看樣式。而後照搬到微信小程序裏。可是我寫的頁面並不複雜。並不能徹底的發現更多的不一樣。
在小程序裏試圖層爲view ，但它並不像div同樣，view 和text在一塊兒會重疊。我以爲至關於 div和span。
還有一些CSS樣式並不支持。

數據渲染：

這個用flex佈局寫的，頁面比較簡單。

我記得昨天有個東西我找了很久，就是
「enablePullDownRefresh」: true。容許用戶下拉。
一開始我覺得這是本身寫的。這是配置在json文件裏。官方的文件幾乎沒怎麼看。。而後就尷尬了。

var util = require("../../utils/util.js");
var app = getApp();
 
Page({
data: {
textDataList: [],
tempid: 0,
lastid: 0
},
onLoad: function() {
util.alertLoading('數據加載中', 2000);
this.loadData();
},
refreshData: function() {
util.alertLoading('刷新中', 2000);
this.loadData();
 
},
loadData: function() {
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
tempid: newData.list[0].id
})
console.log(that.data.tempid);
 
})
},
onReachBottom: function() {
util.alertLoading("加載中!", 2000);
console.log("加載這個沒作 = =！");
},
onPullDownRefresh: function() {
util.alertLoading("刷新中！", 1000);
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
lastid: newData.list[0].id
})
console.log(that.data.lastid);
});
if (this.data.lastid === this.data.tempid) {
util.alertSuccess("已是最新了", 1000);
}
}
})

　　

後續微信小程序思惟導圖（來源於網絡）

快下班了，其實寫以前我想寫的更詳細一點，但更多的介紹我想沒有比官方更清楚的。

我以爲最好的學習方式就是擼一遍代碼，比看10個demo有用的多。

時間倉促，頁面很簡單。也但願把你的demo分享給我互相學習。感謝你的閱讀，

Bye。

項目地址： https://github.com/miloers/WxSmall