template
index.wxml里导入模板
<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 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
2.
include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置
数据绑定
1.
用扩展运算符 ... 来将一个对象展开
2.
花括号和引号之间如果有空格，将最终被解析成为字符串
<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 来指定列表中项目的唯一的标识符。 wx:key="{{index}}"
************
条件渲染
1.block
<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
2.v-if与hidden
wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
3. wx:if wx:elif wx:else
模板
1.定义模板
使用name属性，作为模板的名字。然后在<template/>内定义代码片段。
2.使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
<template is="msgItem" data="{{...item}}"/>
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
事件
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
兼容处理
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
创建一个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 自适应
640尺寸
字体：24rpx 相当于1.2rem
宽高所有的尺寸都可以设置
2.
li 设置为display:block
wxml
1.
input后必须加"/"，按照规则来写，有空格会报错
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
}
//网络请求
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", // 设置请求的 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 = "请稍后", 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>// 将所需的提交数据用form标签包起来
<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
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
console.log(userInfo)
})
}
微信小程序html解析
1.
