小程序學習指南(一)
結構
- app.json 文件的配置和路徑
{"pages":"pages/index/index"} 表示找到pages文件夾下面的index文件下面的index文件
- app.js 定義全局函數
App({
onLoad(){console.log("加載中")},
ongetString(){console.log("第一個小程序")}
})
- pages文件夾下面每個頁面都有自己的文件夾。index文件夾下面就有3個文件index.wxml index.wxss index.js index.json每個文件夾下面都必須有這3個文件
數據綁定
就拿index頁面舉例:
在小程序里面分為視圖層，邏輯層。邏輯層在.js里面。視圖層用來顯示。
(1)數據綁定
數據綁定一般都在js文件里面再視圖層用{{變量名}}來賦值
在js里面Page({
data:{user:"患者名稱",title:"請來醫院"}
})
//index.wxml
<text class="user">{{user}}</text>
//page.js
data:{
user:"Hello World",
}
(2)數據更改this.setData({})
在邏輯層里面要是想更改數據只有通過事件來觸發自己沒辦法直接設置修改
//index.html
<text class="user">{{user}}</text>
<button bindtap="onchange">點擊變換</button>
//page.js
onchange:function(){
this.setData({
user: "病人家屬",
title: "離開醫院"
})
}
(3)顯示用戶圖片{{userInfo.avatarUrl}}
//index.wxml
<image src="{{userInfo.avatarUrl}}"></image>
//app.js
在onLoad:function(){
var that = this;
//getUserInfo就是個方法
app.getUserInfo(function(userInfo){
that.setData({
userInfo:userInfo
})
})
}
(4)控制屬性之if
有的時候通過控制屬性來判斷視圖層顯示不顯示。wx:if="{{}}"
// index.html
<view wx:if="{{length>5}}"></view>
表示當length>5的時候他才顯示
// index.js
Page({
data:{length:6}
})
// 如果要顯示很多個視圖組件
<block wx:if = "{{config}}">
<view> view1</view>
<view> view2</view>
</block>
關鍵字
框架提供了兩個關鍵字表示真和假
true : boolean 類型的true,代碼真值
false: boolean 類型的false， 代碼假值
<checkbox checked="{{false}}"></checkbox>
特別注意不要直接寫checked = "false",其計算結果就是個字符串。轉成boolean類型后代表真值
(5)控制屬性之for循環
//index.html
<view wx:for="{{array}}">
{{index}}:{{item.message}}
</view>
//index.js
array:[{message:"Hello"},{message:"World"}]
index是當前數據的索引的默認變量名.Item是當前數據項的默認變量名.也可以使用wx:for-item 和wx:for-index 來制定別名 (基本上不用)
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
