template
index.wxml里導(dǎo)入模板
<import src="../item/item.wxml"/>
<template is="staffName" data="{{...staffA}}"></template>
item.wxml寫入模板
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
import的作用域與include
1.
import 有作用域的概念即供，即只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件 import 的 template贯钩。
C import B募狂，B import A办素，在C中可以使用B定義的template角雷，在B中可以使用A定義的template，但是C不能使用A定義的template性穿。
2.
include可以將目標(biāo)文件除了<template/>的整個(gè)代碼引入勺三，相當(dāng)于是拷貝到include位置
數(shù)據(jù)綁定
1.
用擴(kuò)展運(yùn)算符 ... 來將一個(gè)對(duì)象展開
2.
花括號(hào)和引號(hào)之間如果有空格，將最終被解析成為字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>
列表渲染
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
************
使用 wx:key 來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符需曾。 wx:key="{{index}}"
************
條件渲染
1.block
<block/> 并不是一個(gè)組件吗坚，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染呆万，只接受控制屬性商源。
2.v-if與hidden
wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此谋减，如果需要頻繁切換的情景下牡彻，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好出爹。
3. wx:if wx:elif wx:else
模板
1.定義模板
使用name屬性庄吼，作為模板的名字缎除。然后在<template/>內(nèi)定義代碼片段。
2.使用模板
使用 is 屬性总寻，聲明需要的使用的模板器罐，然后將模板所需要的 data 傳入
<template is="msgItem" data="{{...item}}"/>
is 屬性可以使用 Mustache 語法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
事件
bind事件綁定不會(huì)阻止冒泡事件向上冒泡渐行，catch事件綁定可以阻止冒泡事件向上冒泡轰坊。
兼容處理
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
// 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦颍梢赃@樣子提示
wx.showModal({
title: '提示',
content: '當(dāng)前微信版本過低祟印，無法使用該功能衰倦，請(qǐng)升級(jí)到最新微信版本后重試。'
})
}
創(chuàng)建一個(gè)tab
**app.json里寫入**
"tabBar": {
"color": "#747575",
"selectedColor": "#ff927c",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index/index",
"iconPath": "image/img_wyl/nav1.png",
"selectedIconPath": "image/img_wyl/nav11.png",
"text": "首頁"
}
]
},
wxss
1.
rpx 自適應(yīng)
640尺寸
字體：24rpx 相當(dāng)于1.2rem
寬高所有的尺寸都可以設(shè)置
2.
li 設(shè)置為display:block
wxml
1.
input后必須加"/"旁理，按照規(guī)則來寫樊零，有空格會(huì)報(bào)錯(cuò)
2.
<text class="{{userInfo.gender==1 ? 'sex_man' : 'sex_woman'}}">
<p class="jiazai {{type.jiazai==1?'jiazai_show':''}}">老板別著急孽文，正在給你找</p>
公共js
const config = require("config.js");
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
//網(wǎng)絡(luò)請(qǐng)求
function request(parameters = "",success, method = "GET", header = {}) {
wx.request({
url: config.BaseURL +(method == "GET" ? "?" : "")+ parameters,
data: {},
method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: header ? header : "application/json", // 設(shè)置請(qǐng)求的 header
success: function(res){
console.log(res);
success(res);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
//HUD
//成功提示
function showSuccess(title = "成功啦", duration = 2500){
wx.showToast({
title: title ,
icon: 'success',
duration:(duration <= 0) ? 2500 : duration
});
}
//loading提示
function showLoading(title = "請(qǐng)稍后", duration = 5000) {
wx.showToast({
title: title ,
icon: 'loading',
duration:(duration <= 0) ? 5000 : duration
});
}
//隱藏提示框
function hideToast(){
wx.hideToast();
}
//顯示帶取消按鈕的消息提示框
function alertViewWithCancel(title="提示",content="消息提示",confirm,showCancel="true"){
wx.showModal({
title: title,
content: content,
showCancel: showCancel,
success: function(res) {
if (res.confirm) {
confirm();
}
}
});
}
//顯示不取消按鈕的消息提示框
function alertView(title="提示",content="消息提示",confirm){
alertViewWithCancel(title,content,confirm,false);
}
module.exports = {
formatTime: formatTime,
request: request,
showSuccess: showSuccess,
showLoading: showLoading,
hideToast: hideToast,
alertViewWithCancel: alertViewWithCancel,
alertView: alertView
}
input的值獲取
var username = e.detail.value.username;
//html
<form bindsubmit="formSubmit">
<input name="username" maxlength="18" placeholder="輸入用戶名"></input>
</form>// 將所需的提交數(shù)據(jù)用form標(biāo)簽包起來
<button class="qr_btn" formType="submit">下一步</button>
//js
formSubmit:function(e){
console.log(e.detail.value)
}
獲取用戶信息
var app = getApp();
data:{userInfo:{}}
onLoad: function (options) {
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function (userInfo) {
//更新數(shù)據(jù)
that.setData({
userInfo: userInfo
})
console.log(userInfo)
})
}
微信小程序html解析
1.
