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 标签，实现页面跳转