目錄結(jié)構(gòu)
小程序默認的目錄結(jié)構(gòu)如下圖：
- pages 頁面文件夾
- index 首頁
- logs 日志頁
- utils 工具
- app.js 項目入口（類似main.m）
- app.json 全局配置
- app.wxss 全局樣式
- project.config.json 項目配置（類似info.plist)
- sitemap.json 配置小程序及其頁面是否允許被微信索引
- .gitignore git管理的文件忽略
小程序文件結(jié)構(gòu)和傳統(tǒng)web對比
| 結(jié)構(gòu) | 傳統(tǒng)web | 微信小程序 |
|---|---|---|
| 結(jié)構(gòu) | html | wxml |
| 樣式 | css | wxss |
| 邏輯 | javascript | javascript |
| 配置 | 無 | json |
app.json
app.json中，pages字段用于配置小程序中所有需要集成的頁面香到，第一條數(shù)據(jù)頁面是小程序的首頁日矫，當新增一條數(shù)據(jù)時送粱，小程序IDE會自動生成對應(yīng)的頁面文件。
window字段用于配置window的一些屬性掏熬，比如顏色，標題，是否支持下拉刷新等隘膘。
tarbar用于配置tarbar相關(guān)的屬性，比如顏色缚窿，標題棘幸，圖標，位置等倦零。
頁面.json
可單獨為特定頁面配置屬性误续，若不配置則默認采用app.json文件中window的屬性值吨悍。
usingComponents聲明需要使用的自定義組件。
component是否為組件蹋嵌，Bool類型育瓜。
siteMap.json
頁面.js
調(diào)用Page方法管理頁面的生命周期≡岳茫可以在data中添加自定義屬性躏仇。
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
msg: "hello world",
num: 10000,
isOn: false,
person: {
age: 30,
name: "小王"
},
persons:[
{
id: 0,
name: "小王"
},
{
id: 1,
name: "小張"
},
{
id: 2,
name: "小李"
}
]
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
頁面.wxml
| wxml標簽 | html標簽 | 描述 |
|---|---|---|
| text | span | 行內(nèi)元素（不會換行） |
| view | div | 塊級元素（會換行） |
訪問js文件定義的屬性：
<view>{{msg}}</view>
<view>{{person.name}}</view>
標簽屬性中使用js文件定義的屬性：
<view data-person="{{person}}">person</view>
<checkbox checked="{{isOn}}">選擇框</checkbox>
可以在{{}}中加入表達式（運算）
<view>{{1+2}}</view>
<!-- 3 -->
<view>{{'1'+'2'}}</view>
<!-- 12 -->
數(shù)組循環(huán)/對象循環(huán) 渲染
<view
wx:for="{{persons}}"
wx:for-item="item"
wx:for-index="index"
wx:key="*this">
{{index}} {{item.name}}
</view>
wx:for-item="item"與wx:for-index="index"是循環(huán)項和循環(huán)索引的默認值，可以不寫腺办，也可以手動改變名稱焰手。wx:key是用于提高渲染性能的唯一key，普通數(shù)組傳"*this"怀喉。
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
class="my_class">
{{key}} {{value}}
</view>
對象循環(huán)一般會重名為value和key书妻，這樣更符合語義。
block
block是個占位符標簽躬拢，頁面渲染時躲履，小程序會將其移除。
上面的代碼最終效果如下：
<view class="my_class">
age 30
</view>
<view class="my_class">
name 小王
</view>
如果將<view>改成<block>聊闯，則會忽略標簽工猜。
age 30
name 小王
條件渲染
控制標簽顯示/隱藏兩種方式：
方式1:wx:if
直接將標簽從頁面結(jié)構(gòu)移除。
<view wx:if="{{true}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else="{{true}}">3</view>
方式2:hidden
只是控制標簽的顯示與隱藏菱蔬。對于頻繁切換顯示隱藏狀態(tài)的標簽篷帅，這種方式性能更好。
<view hidden="{{true}}">4</view>
兩種方式最終效果如下拴泌，可以看到wx:if的未顯示標簽直接被移除了犹褒，而hidden只是設(shè)置了樣式view[hidden] { display: none; }。
<view>1</view>
<view>4</view>
style樣式分別如下：
view {
display: block;
}
view[hidden] {
display: none;
}
事件綁定
微信小程序js中不能通過this.data.num = value;的方式來設(shè)置num的值弛针，而需要通過設(shè)置data對象來實現(xiàn)叠骑。
// pages/demo2/demo2.js
Page({
data: {
num: 100
},
handleInput(e) { // e事件源對象
var value = e.detail.value;
console.log(value);
this.setData({
num: value
})
},
handleTap(e) {
console.log(e);
const change = e.currentTarget.dataset.change
this.setData({
num: this.data.num+change
})
}
})
通過自定義屬性change來傳遞值變化量。
<!--pages/demo2/demo2.wxml-->
<input type="text" bindinput="handleInput" />
<button bindtap="handleTap" data-change="{{1}}">+</button>
<button bindtap="handleTap" data-change="{{-1}}">-</button>
<view>{{num}}</view>
頁面.wxss
在web開發(fā)中削茁，需要通過link標簽引入css樣式文件宙枷，但小程序中不需要，會自動根據(jù)同名稱文件引入茧跋。
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)慰丛。規(guī)定屏幕寬為750rpx。也可以通過100%或者100vw指定比例瘾杭。
calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學計算操作诅病。
@import 導入外聯(lián)樣式表，只支持相對路徑。
/* pages/demo2/demo2.wxss */
@import "../../styles/common.wxss";
view{
width: calc(750rpx * 100 / 375);
height: 200rpx;
font-size: 40px;
background-color: bisque;
}
小程序自帶組件
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
自定義組件
以下是自定義Tabs組件的一個例子贤笆。
properties屬性可以通過外部訪問蝇棉。
// pages/demo1/Tabs.js
Component({
/**
* 組件的屬性列表
*/
properties: {
tabs:{
type:Array,
value:[]
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
handleItemTap(e){
const {index} = e.currentTarget.dataset;
// 子組件向父發(fā)送自定義事件
this.triggerEvent("itemChange", {index})
}
}
})
Tabs.json文件：
{
"component": true,
"usingComponents": {}
}
slot標簽是占位標簽，slot是插槽的意思芥永〈垡螅可以通過Shift+Alt/Option+F快捷鍵對代碼進行格式化。
<!--pages/demo1/test.wxml-->
<view class="tabs">
<view class="tabs_title">
<view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" wx:key="id" bindtap="handleItemTap"
data-index="{{index}}">
{{item.name}}
</view>
</view>
<slot></slot>
</view>
wxss中view.xx可以省略view埋涧，簡寫為.xx板辽。
view.tabs_title{
display: flex;
}
view.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color: red;
border-bottom: 10rpx solid currentColor;
}
使用Tabs組件。
// pages/demo1/demo1.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
tabs:[
{
id:0,
name:"首頁",
isActive:true
},
{
id:1,
name:"分類",
isActive:false
},
{
id:2,
name:"我的",
isActive:false
}
]
},
handleItemChange(e){
const {index} = e.detail;
// let {tabs} = this.data;
// let tabs = this.data.tabs;
let tabs = JSON.parse(JSON.stringify(this.data.tabs))
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
demo1.json中配置使用到的組件棘催。
{
"usingComponents": {
"Tabs": "Tabs"
}
}
view標簽將會替換Tabs組件中的slot標簽劲弦。
<!--pages/demo1/demo1.wxml-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<view>內(nèi)容，替換slot標簽</view>
</Tabs>
組件js文件各定義段如下圖：
應(yīng)用生命周期
// app.js
App({
// 第一次啟動觸發(fā)事件醇坝，類似iOS中的didFinishLaunchingWithOptions
onLaunch(){
console.log("onLaunch");
},
// 小程序被看到瓶您，類似iOS中applicationWillEnterForeground
// 但iOS中首次啟動顯示不會觸發(fā)，小程序會觸發(fā)
onShow(){
console.log("onShow");
},
// 小程序隱藏纲仍，類似iOS中的applicationDidEnterBackground
onHide(){
console.log("onHide");
},
// 小程序代碼發(fā)送報錯觸發(fā)，常用于收集錯誤信息贸毕，并發(fā)送給后臺
onError(err){
},
// 應(yīng)用找不到啟動時候的入口頁面觸發(fā)
onPageNotFound(){
wx.navigateTo({
url: '/pages/demo2/demo2',
})
}
})
