|
作者：王梵，來自原文地址
編碼前的準(zhǔn)備工作
可以看到，在開發(fā)模塊中又細(xì)分了6個(gè)子模塊。
-
簡易教程
這個(gè)子模塊中有官方提供的組件+API的演示demo，還可以掃碼安裝demo小程序，同時(shí)，也能從這里下載開發(fā)工具。
-
框架
這里介紹的是小程序的項(xiàng)目結(jié)構(gòu)
-
組件
介紹所有的組件及使用方法
-
API
介紹所有的API，包括獲取用戶信息，本地緩存，支付功能等。
-
工具
提供小程序開發(fā)所使用的小工具的下載地址
-
Q&A
提供了一些問題的答案，同時(shí)還有開發(fā)者社區(qū)。
打開開發(fā)工具
-
第1張圖是打開開發(fā)工具時(shí)的第一個(gè)界面，需要掃碼登陸。
-
第2張圖是掃碼成功后的界面，點(diǎn)擊第一個(gè)小程序開發(fā)。
-
第3張圖，在這里可以添加項(xiàng)目，也可以打開之前的項(xiàng)目。如果是第一次打開，那么只有添加項(xiàng)目的按鈕，點(diǎn)擊添加項(xiàng)目。
-
第4張圖，在第一個(gè)輸入框內(nèi)需要使用AppID，獲取的方式查看這里。
ok！經(jīng)過了上面4步，我們終于打開了開發(fā)工具
上圖展示的是編輯狀態(tài)下的結(jié)構(gòu)
下面，我們說一下項(xiàng)目結(jié)構(gòu)，也就是上圖中第3個(gè)框和第4個(gè)框。
項(xiàng)目結(jié)構(gòu)
這部分對應(yīng)文檔中的框架部分。
一個(gè)完整的小程序，包含描述整個(gè)項(xiàng)目的app文件系統(tǒng)（app.js，app.json，app.wxss）和各個(gè)page（每個(gè)page包含js，json，wxml，wxss）。其中，js文件處理邏輯，json存放配置，wxml存放頁面結(jié)構(gòu)，wxss存放樣式表。
下面，我們挨個(gè)介紹
app.wxss
它是小程序的公共樣式表，結(jié)構(gòu)如下，首先是一個(gè)小數(shù)點(diǎn).加上別名，之后就是一對大括號(hào)，在大括號(hào)內(nèi)設(shè)置屬性，鍵值對用冒號(hào)分割，鍵值對后面有分號(hào)；
關(guān)于如何使用其中的設(shè)置，我們會(huì)在頁面的wxml時(shí)說到。
-
.container {
-
height: 100%;
-
display: flex;
-
flex-direction: column;
-
align-items: center;
-
justify-content: space-between;
-
padding: 200rpx 0;
-
box-sizing: border-box;
-
}
app.json
該文件中存放的公共配置，格式就是json，其中pages是必須要配置的，程序中的每一個(gè)頁面，都需要在這里配置，否則頁面會(huì)找不到。 window屬性配置的是一些窗口屬性。 想要看其它的配置，請點(diǎn)擊這里。
-
{
-
"pages":[
-
"pages/index/index",
-
"pages/logs/logs"
-
],
-
"window":{
-
"backgroundTextStyle":"light",
-
"navigationBarBackgroundColor": "#fff",
-
"navigationBarTitleText": "WeChat",
-
"navigationBarTextStyle":"black"
-
}
-
}
app.js
這里處理小程序的邏輯，更詳細(xì)的內(nèi)容，請點(diǎn)擊這里。
-
App({
-
onLaunch: function () {
-
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
-
var logs = wx.getStorageSync('logs') || []
-
logs.unshift(Date.now())
-
wx.setStorageSync('logs', logs)
-
},
-
getUserInfo:function(cb){
-
var that = this
-
if(this.globalData.userInfo){
-
typeof cb == "function" && cb(this.globalData.userInfo)
-
}else{
-
//調(diào)用登錄接口
-
wx.login({
-
success: function () {
-
wx.getUserInfo({
-
success: function (res) {
-
that.globalData.userInfo = res.userInfo
-
typeof cb == "function" && cb(that.globalData.userInfo)
-
}
-
})
-
}
-
})
-
}
-
},
-
globalData:{
-
userInfo:null
-
}
-
})
整個(gè)js程序就是一個(gè)App方法，onLaunch是回調(diào)方法，getUserInfo是自定義方法，globalData是自定義變量。
page的wxml文件
一個(gè)文件夾，就是一個(gè)頁面，如果特別說明，下面說的js文件，wxss文件，wxml文件，json文件都處于同一個(gè)文件夾下。
-
<view class="container">
-
<view bindtap="bindViewTap" class="userinfo">
-
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
-
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
-
</view>
-
<view class="usermotto">
-
<text class="user-motto">{{motto}}</text>
-
</view>
-
</view>
這與xml文件類似，最外面的view標(biāo)簽上有一個(gè)class屬性，這個(gè)屬性用于設(shè)置view的一些屬性，屬性值Container則指向這些我們設(shè)置的屬性集，有2種可能性，一種是自身所在page的wxss文件，另一種則是app.wxss文件，而container屬于app.wxss中的配置。
還有一點(diǎn)，在app.wxss中，container前面是有個(gè)小數(shù)點(diǎn)的，wxml中調(diào)用時(shí)，不需要小數(shù)點(diǎn)。 第2級(jí)中有2個(gè)view標(biāo)簽，其中第一個(gè)上面有2個(gè)屬性，class和bindtap，其中class屬性與上面說過的一樣，它指向了本頁的wxss文件，第2個(gè)bindtap指的是點(diǎn)擊時(shí)間，它的屬性值是點(diǎn)擊時(shí)觸發(fā)的js方法，它位于本頁的js文件中，我們來看一下。
-
Page({
-
...
-
//事件處理函數(shù)
-
bindViewTap: function() {
-
wx.navigateTo({
-
url: '../logs/logs'
-
})
-
},
|
