1.底部tab 栏配置
"tabBar": {
"selectedColor":"#f31818",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/icon/home.png",
"selectedIconPath": "./images/icon/home.png"
},
{
"pagePath": "pages/task/task",
"text": "任务",
"iconPath": "./images/icon/task.png",
"selectedIconPath": "./images/icon/task.png"
}
]
},
2. window 顶部标题设置,全局配置
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d13333",
"navigationBarTitleText": "demo",
"navigationBarTextStyle":"white"
},页面配置时不要window属性key
3. 基础标签，view 相当于 div, text 相当于text，image 图片标签类似img，navigator 导航标签类似a
4. wxss 类型css,尺寸单位rpx 是一个相对的单位，把屏幕的宽度视为750rpx。
5.列表渲染 wx:for, 默认 遍历项为item,下标index
<view wx:for="{{tasks}}" wx:key="id">
{{index}}: {{item.name}}
</view>wx:for-item 可以指定 遍历项名称
<view wx:for="{{tasks}}" wx:for-item="m" wx:key="id">
{{index}}: {{m.name}}
</view>6.条件渲染 wx:if wx:elif wx:else
<view wx:if="{{score >= 80}}"> A </view>
<view wx:elif="{{score >= 60}}"> B </view>
<view wx:else> C </view>hidden
<view hidden="{{ flag }}"> hidden</view>
wx:if 有更高的切换消耗, hidden 有更高的初始渲染消耗。 频繁切换用 hidden 否则 wx:if 。
7. 点击事件bindtap
<view>count: {{count}}</view>
<!-- data-属性 传递参数 -->
<button bindtap="addFn" data-num="{{2}}">+2</button>
addFn(e){
console.log(e)
let {num} = e.currentTarget.dataset // 获取参数
this.setData({ // /设置值
count:this.data.count + num
})
},8. 跳转
8.1标签跳转
<navigator url="/pages/me/me?id=111">跳转普通页面</navigator>
<navigator url="/pages/index/index" open-type="switchTab">跳转tabbar页面</navigator> 8.2 js 代码实现跳转
//跳转tabbar页面
wx.switchTab({
url: '/pages/index/index',
})
//跳转普通页面
wx.navigateTo({
url: '/pages/me/me?id=111333',
})获取路径参数
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options.id); // 获取路径参数
}