1.文件說明html
.js 定義局部事件 Page app.js 定義全局事件 App app.json 全局配置文件 app.wxss 全局頁面渲染
2.一鍵整理代碼快捷鍵web
shift+alt+f
3.變量的使用json
在.js的data中定義變量
text:"這是內容"
在.wxml中調用變量
<text>{{text}}</text>
4.事件的定義api
.wxml中給按鈕調用btnClick點擊事件
<button type="primary" bindtap='btnClick'>按鈕</button>
.js中的Page中定義btnClick點擊事件
btnClick:function(){
console.log("你點擊了按鈕")
}
5.動態更改text變量內容微信
this.setData({text1:"內容1",text2:"內容2"})
6.獲取變量app
var isText = this.data.text
7.if的使用xss
<!--
show=true 顯示
show=false 隱藏
-->
<view wx:if="{{show}}">內容</view>
8.if else的使用svg
<!--
show1=true 顯示內容1
show1=false show2=true 顯示內容2
show1=false show2=false 顯示內容3
-->
<view wx:if="{{show1}}">內容1</view>
<view wx:elif="{{show2}}">內容2</view>
<view wx:else>內容3</view>
9.for循環的使用佈局
<!-- "for循環內容"被循環輸出3次 -->
<view wx:for="{{['a','b','c']}}">
for循環內容
</view>
<!-- 循環輸出a,b,c -->
<view wx:for="{{['a','b','c']}}">
{{item}}
</view>
10.刪除第一個數據flex
var items = ['a','b','c'] items.shift()
11.兩種調用模板的方法
（1）<include src="../templates/模板名" />
（2）模板內容
<template name="footer1">內容1</template>
<template name="footer2">內容2+{{text}}</template>
調用
<import src="../templates/模板名" />
<template is="footer1" />
//調用並傳參
<template is="footer2" data="{{text:'這裏是傳入的內容'}}" />
12.事件的冒泡
兩種點擊事件 （1）bintap 會觸發事件冒泡 （2）catchtap 不會觸發時間冒泡
13.後臺獲取前臺傳入的值
前臺
<view bindtap="Click"
data-title="新聞標題"
data-id="100">
</view>
後臺獲取
Click:function(event){
console.log(event)
}
14.頁面配置
app.json文件
//配置啓動文件
{
"pages":[
"src/pages/index/index"
]
}
//配置全局窗口樣式
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
//底部 tab 欄的表現
"tabBar": {
"list": [{
"pagePath": "src/pages/test_01/index",
"text": "首頁",
"iconPath": "images/talk.png",
"selectedIconPath": "images/talk.png"
},{
"pagePath": "src/pages/index/index",
"text": "第二頁",
"iconPath": "images/calendar.png",
"selectedIconPath": "images/calendar.png"
}]
}
具體內容查看開發文檔
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
15.獲取app.js裏的內容
app.js文件裏定義全局數據
App({
mydata:{
username:"jikexueyuan"
})
index.js文件裏獲取全局數據
var app =getApp()
app.mydata.username
16.兩種頁面跳轉的方式
在.js文件裏實現跳轉頁面
（1）能夠返回上一頁的跳轉方式
wx.navigateTo({
url: '../test/test1/test1_home/index',
})
（2）不能夠返回上一頁的跳轉方式
wx.redirectTo({
url: '../test/test1/test1_home/index',
})
在.wxml文件實現跳轉頁面
（1）<navigator url='../test1_detail/index?id=10'>
<text>
xml頁面跳轉1
</text>
</navigator>
（2）<navigator url='../test1_detail/index?id=10' redirect>
<text>
xml頁面跳轉2
</text>
</navigator>
17.頁面跳轉並傳參
傳參
wx.navigateTo({
url: '../test/test1/test1_home/index?id=1&name="xiangyu"',
})
獲取，傳過來的數據保存在options裏
onLoad: function(options) {
console.log(options)
}
18.px和rpx的區別
px 單純設置容器的大小 rpx 容器會自適應調節大小
19.相對絕對定位的使用
position: relative;//相對定位，相對本身發生偏移 position: absolute;//絕對定位，相對於父級容器發生偏移
20.flex佈局的使用
display: flex;//使用flex佈局 flex-direction: row;//默認，橫向排列 flex-direction: column;//豎直排列 flex-wrap: nowrap;//默認，超出被擠壓 flex-wrap: wrap;//超出換行 flex-wrap: wrap-reverse;//反轉並超出換行 flex-flow: row wrap;//flex-direction和flex-wrap的結合使用 justify-content: flex-start;//默認，在主軸上居左排列 justify-content: flex-end;//在主軸上局右排列 justify-content: center;//在主軸上居中排列 justify-content: space-around;//平分主軸排列 justify-content: space-between;//兩邊對齊，再平分主軸排列 align-itrms: flex-start;//在交叉軸對齊方式，屬性同上 align-self: flex-start;//定義元素自身的對齊方式，屬性同上 flex-grow: 0;//默認，每一個元素在主軸上佔據的空間，擴張 flex-shrink: 1;//默認，每一個元素在主軸上佔據的空間，擠壓 flex-basis: 50px;//元素在主軸上佔據的空間大小 flex: 0 1 50px;//grow，shrink，basis的結合使用 order: 1;//定義元素的排列順序
22.彈窗事件
具體看開發文檔 https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html
23.導航
navigator相似於 html的 a 標籤，實現頁面跳轉