1：小程序遵循{{}}语法
<view>hello {{name}}</view>
2：循环便利
<view wx:for=”{{}}”>{{item}}</view>
自带item
3:点击事件
Bindtap=”事件名称”
4：在js中对事件进行监听这里和vue不太一样例如
<view bindtap = “jia”>+</view>
data:{
Counter:0
}
Jia(){
this.setData({
counter:this.data.counter+1
})
}
5：全局配置
全局配置比较多，常用的有
属性类型必填描述
pagesString[]是页面路径列表
windowObject否全局的默认窗口表现
tabBarObject否底部tab栏的表现
Pages:页面路径列表
用于指定小程序有哪些页面组成，每一项都对应一个页面路径信息
小程序中所有的页面都是必须在pages中注册
Winsow:全局的默认窗口
用于指定窗口如何展示
"window": {
用于修改导航背景颜色，必须是16禁止
"navigationBarBackgroundColor": "#ff5777",
修改导航字体颜色，只有black和white两个颜色选择
"navigationBarTextStyle": "black",
标题
"navigationBarTitleText": "小程序",
在ios中下拉露出的背景颜色，android是煤油用的
"backgroundColor": "#eeeeee",
下拉是小点的状态，中有dark和；light两种选择
"backgroundTextStyle": "light",
下拉刷新，默认是false
"enablePullDownRefresh": false
}
tabBar:底部tabBar栏的展示
"tabBar": {
选中是图标的颜色
"selectedColor":"#ff5777",
//list至少两个，最多5个.代表分页
"list": [{
跳转的路径
"pagePath": "pages/home/home",
下面的字
"text": "首页",
未选中是图标的路径默认路径
"iconPath": "asside/tabbar/home.png",
选中时图标的路径
"selectedIconPath": "asside/tabbar/home_active.png"
},
{
"pagePath": "pages/news/news",
"text": "分类",
"iconPath": "asside/tabbar/cart.png",
"selectedIconPath": "asside/tabbar/cart_active.png"
}
]
}
6：单个页面配置
单个页面配置不需要window,直接写
{
"usingComponents": {},
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white",
"backgroundColor": "#ff5777",
"enablePullDownRefresh": true
}
7：获取用户信息-保存全局变量
获取微信用户的基本信息方式
1：wx.getUserInfo 即将废弃的接口
2：button组件 将open-type改成getUesrInfo,并且绑定bindgetuserinfo事件去获取
3：使用open-data组件展示用户信息
8：可以在App.js中定义一些数据，在这里的数据是全局数据，他本身会产生一个实例对象
globalDat:{
Name:’codeywhy‘
Age:18
}
在其他页面使用时只需要调用这个实例对象就行
Const app = getApp()//getApp()获取App()产生的实例对象
const app = getApp();
console.log(app.globDat.name);
10：text组件
Text组件与span组件差不多
Text长用属性
属性类型默认值必填说明
selecttablebooleanfalse否文本是否可选
spacestring 否显示连续空格
decodeboolleanfalse否是否解码
注意：在小程序中属性默认值是false如果加上该属性，那么·就是设置了该属性，值为true
selecttable属性决定文本内容是否可以让用户选中
space属性有三个取值
值说明
ensp中文字符空格一般大小
emsp中文字符空格大小
nbsp根据字体设置空格大小
decode是否解码
11：Button组件用于创建按钮。默认块极元素
常见属性
属性类型默认值必填说明
sizestringdefault否按钮大小
typestringdefault否按钮样式
plainbooleanfalse否按钮是否镂空，背景颜色透明
disabledbooleanfalse否是否禁用
loadingbooleanfalse否名称前是否带loading图标
form-typestring 否用于<form>组件，点击会分别触发<form>组件的submit/reset事件
oprn-typestring 否微信开放能力
hover-classstringButton-hover否指定按钮按下去的样式类，当hover-class=”none”时没有点击效果
<button size='mini' type='primary'>type属性</button>
<button size='mini' type='default'>type属性</button>
<button size='mini' type='warn'>type属性</button>
12：view组件
view组件的基本使用
1：view 容器相当于div(块级元素，独占一行，通常用作容器组件)
属性类型默认值必填说明
hover-classstringnone否按下去的样式类，当hover-class=’none’时没有点击效果
Hover-stop-propagationbooleanfalse否指定是否组织本节点的祖先节点出现点击状态
Hover-start-timenumber50否按住多久出现点击态，单位毫秒
Hover-stay-timenumber400否手指送松开后点击状态保留时间，单位毫秒
13：image组件
1：
1：image组件可以写成单表钱，也可以写成双标签
2：image组件默认有自己的大小：320*240
3：image组件是一个行内块元素（inline-block）
2：常用属性
属性类型默认值必填说明最低版本
srcstring 否图片资源地址1.0.0
modestringscaleToFill否图片裁剪、缩放的模式1.0.0
webpbooleanfalse否默认不解析 webP 格式，只支持网络资源2.9.0
lazy-loadbooleanfalse否图片懒加载，在即将进入一定范围（上下三屏）时才开始加载1.5.0
show-menu-by-longpressbooleanfalse否开启长按图片显示识别小程序码菜单2.7.0
binderroreventhandle 否当错误发生时触发，event.detail = {errMsg}1.0.0
bindloadeventhandle 否当图片载入完毕时触发，event.detail = {height, width}1.0.0
src:本地地址/远程地址
补充：本地相册，或拍照
1：定义一个按钮，监控点击事件
<button bindtap='chooseimg'>选择图片</button>
2：在data定义一个变量用来保存选择图片的地址，对该事件进行处理
data: {
imgpath:''
},
chooseimg(){
wx.chooseImage({
count: 0,
success:(res)=>{//这里必须用建通函数，否则this指向不正确
this.setData({
imgpath:res.tempFilePaths[0]//进行地址复制
})
}
})
}
3：wxml中定义一个image组件，src属性给予赋值{{}}语法
14:input组件
属性类型默认值必填说明
Valuestring 输入框初始内容
typestringtext否键盘类型
Passwordbooleanfalse否是否时密码类型
placeholderstring 是 输入框为空时占位付
Confirm-typestringdone否设置键盘右下角按钮文字，仅在type=”text”时生效
事件
Bindinputeventhandle是键盘输入时触发，处理函数可以直接return一个字符串，替换输入框内容
bindfocus 是聚焦时触发
Bindblur 失去焦点时触发
bindconfirm 点击完成按钮时触发
Type的合法值
Text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
Digit带小数点的数字键盘
Confirn-type的合法值
Send发送
search搜索
next下一个
go前往
done完成
15：wxss
1:行内样式
<view style=’cold:red;font-size:30px’>哈哈</view>
2：业内样式
在本身文件的css中设置
3：全局样式
在app.js中设置样式
4：如果有相同的样式
优先级：行内样式>页面样式>全局样式
16：Mustache语法
1：与vu基本一样
2：可以三目运算付
<view>{{age >= 18?’成年人：未成年人’}}</view>
3：时间
Js中
data:{
noteTime:new Date().toLocaleString()
}
onLoad(){
setInterval(()=>{
This.setData({
nowTime:new Data().toLocaleString()})
})
,1000}
17:block标签的意义
1:<block/>并不是一个组件，他仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（v-for/v-if）
2：使用block有两个好处
1：将需要进行遍历或者判断的内容进行包裹
2：将便利和判断的属性放在block标签中，不影响普通属性阅读，提高代码质量
18：ittem,index起名字
<view wx:for="{{moves}}" wx:for-item='move' wx:for-index='i'>{{move}} {{i}}</view>
20:wxs语法
1：wxs与js差不多，不支持es6
2:需要<wxs>标签,其次需要module属性，值无所谓
<wxs module="info">
var message ='hello word';
var name = '许';
function sum(num1,num2){
return num1 + num2
}
// <!-- commonjs导出 -->
module.exports = {//利用commonjs方法将定义内容导出
message:message,
name:name,
sum:sum
}
3：使用
1：利用mustache语法，并且利用上面的值
<view>{{info.message}}</view>
<view>{{info.name}}</view>
<view>{{info.sum(10,20)}}</view>
21：事件通过bind/cath这个属性绑定在组件上的 例如bindtap/cath/tab,在1.5之后为了阅读性可以在bind和cath上加一个冒号
22：常见事件类型
1：某些组件会有自己特性的事件类型，具体看文档
例如：input有bindinput/bindblur.bindfocus
Scroll-view有bindscrolltowpper/bindscrolltolower
类型触发条件
touchstar手指触摸动作开始
touchmove手指出触摸后移动
touchcancel手指触摸动作被打断，例如来电，弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并处罚这个事件，tap事件将不会触发
longtap手指触摸后，超过350ms再离开（推荐使用longpress）
23:事件对象介绍
当某个事件触发时，会产生一个事件对象，并且这个对象会被传入到回调函数中
属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的的毫秒数
targetObject触发事件的组件的一些属性集合
currentTargetObject当前组件的一些属性集合
detailObject额外信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组
24：参数传递
利用data-来进行参数传递，例如data-index =“{{index}}”
data-:固定名称，index:自己自定义的名子，{{index}}传递的值
接受：
在ji文件中，e.targe.dataset就是要传递过去的值
25:事件冒泡和事件捕获
bind:一层层传递
cath:组织事件进一步传递
事件捕获是由外向内，事件冒泡是由内向外
事件捕获：语法：capture-bind:tap =“a”:必须用capture-,如果用bind
就会有捕获，或者冒泡，这里如果用cath就不会capture-cath:tap=”a”,这里必须用：tap
26:组件的样式细节
结论1：组件内的class样式，只对组件wxml内的节点生效，对引用组件的page页面不生效
结论2：组件内不能·使用id选择器，属性选择器，标签选择器
结论三：外部使用class样式，只针对外部wxml的class生效，对组件内不生效
结论四：外部使用id选择器，属性选则器不会对组件内产生影响
结论5：外部使用·标签选择器，会对组件内产生影响
整体结论：
组件内的class样式和组件外的class样式默认会有一个隔离效果
为了防止样式错乱，官方不推荐使用id,属性，标签选择器
如何让class可以相互影响
在组件Components对象中，可以传入一个options属性，其中options属性中有一个stylelsolation（隔离）属性。
stylelsolation有三个取值
1 isolated表示启用样式隔离在自定义组件内，使用class指定的样式不会相互影响（默认取值）
2：applyy-shared表示wxss样式将影响到自定义组件，但自定义组件Wxss种指定的样式不会影响页面
3： shard表示页面wxss样式将会影响到自定义组件，自定义组件wxss样式也会影响页面和其他设置
27:组件之间传递数据和样式
传递数据：外部传递给内部
1：首先在组件内部设置一个组件<view>{{title}}</view>//这里title就是要传递的数据
2：组件内部js文件中，利用 properties属性，它里面是保存的的要传递的数据，然后对要传递的数据进行定义
Properties:{
title:{
type:String//数据类型，
value:‘’//默认数据类型，
observer:function（newval,oldval）{}//参数监听，一个是新的数据，一个是老的数据
}
}
传递样式：外部传递给内部样式
1：首先在内部组件内设置一个组件<view class = “titleclass”>{{title}}</view>//这里的titleclass就是要传递的样式
2：然后在组件内部js文件中，利用 externalClasses属性，它需要的是一个数组externalClasses:[‘titleclass’],这里保存的的就是那个传递的样式
3:在外部文件中xml文件中titleclass = “red”,然后在外部css文件中对red进行设置
<view class = “titleclass”>{{title}}</view>
externalClasses:[‘titleclass’]
<my-canshuchuandi titleclass = “red”>
.red{
Color:’red’}
传递事件
组件内控制外部数据
1：首先在组件内有一个事件，例如这里有一个button
<button bind:tap = “click”>+1</bitton>
2:在js文件中，监听这个点击事件，注意在组件中事件写在methonds中,利用this.triggerEvent(),发送出一个事件
methods: {
click(){
this.triggerEvent('click',{},{})//click:发送的事件名，{}：传递的信息，{}：一些额外信息，这个一般为空
}
}
3：在外部文件中，再接受这个发送过来的事件
<my-event bind:click="click"></my-event>//：click就是接受的那个事件
4：然后再外部js文件中进一步处理
Click(){
This.setData({
Count:this,data.count+1})}
25：组件化开发：获取组件对象的方式（selectComponent）
1:首先定义一个组件
2：在夫组件中引用，并且给该组件定义一个类，或者id一般为id
3：父组件定义一个按钮
4:点击该按钮获取到该组件，具体如下
案例，夫组件修改子组件内容
子组件：{{counter}}
子组件js:
Data:{counter:1}
methods: {
increntment(n){
this.setData({
counter:this.data.counter+n
})
}
}
父组件：“my-select”><my-select>//子组件引用
<button bind:tag = “click”>修改子组件<button>
父组件js:
Click(){
Const myselect = this.selectComponent(“#myselect”)
第一种方法//一般不用
counter：myselect.setData({
Counter:myselect.data.counter + 20
第二种方法：点用函数
Myselect.increntment(20)
})
}
26:组件插槽
1：单插槽
子组件：我是单插槽
<slot></slot>//定义一个单插槽
夫组件引用
<my-slot><button>带年纪</button></my-slot>//此时的button会代替《slot》
2：多插槽：
1：多插槽有多个《slot》得为每个slot弄以个name属性
《slot name =“slot1>》
2：在子组件js文档中 设置一个options属性，里面 multipleSlots设置为true
options:{
multipleSlots:true
}
3:父组件引用
<my-slots>
<button type="primary" slot = "slot2">带年纪</button>
<slider value="50" slot = "slot1"></slider>
<text slot = "slot3">123456</text>
</my-slots>
27:子组件Component构造器
Component({
//1:让使用者可以给组件传入数据
propertis:{
titles:{
type:String,
Value:’’
}
} ，
2：定义组件内部初始化数据
data:{
Counter:0
},
3:用于定义组件内部地函数
methonds:{
Foo(){}
}
4:定义组件地配置选项
Options:{
multipleSlots:true,//多插槽
stylelsolation ：isolated/ applyy-shared/ shard//设置样式隔离方式
}，
5：外界给组件传入额外地样式
externalClasses:[],
6:可以监听properties/data的改变
Observers:{
Counter:function(newval){//这里没有oldval
}
},
7:组件监听生命周期函数
7.1监听所在页面的生命周期函数
pagelifetimes:{
show(){}//监听组件所在页面显示出来时，
hide(){}//监听组件所在页面隐藏起来，
resize(){}//监听页面所在尺寸改变
},
7.2:监听组件本身的生命周期
Lifetimes:{
created(){}//在组建被创建出来，
attached(){}//组件被添加到页面，
ready(){}//组件被渲染
move(){}//组件被移动到另一个节点
detached(){}//组件被移除掉
})
28：网络请求
1:微信提供了专属的Api接口用于网络请求：wx:request(Object object)
属性类型默认值必填说明
urlString 是开封这服务器接口地址
dataString/object/Array/Buffer 否请求参数
headerObject 否设置请求的header，header中不能设置Referer。content-type默认为application/json
methodstringGet否请求方式
dataTypestringjson否返回数据类型
responseTypestringtext否响应数据类型
successfunction 否接口电泳成功的回调函数
failfunction 否接口调用失败回调函数
failcompletefunction 否接口调用结束回调函数（调用成功，失败都会执行）
2:利用Promise进行网络请求封装
1：首先额外新建一个请求封装的js文件例如这里network.js
export default function request(options){
return new Promise((resolve,reject)=>{
Wx.request({
url:options.url,
method:options.method ||’get’,
data:options.data || {},
Success:function(res){
resolve(res)
},
fail:function(err){
Reject(err)}
})})
}
2:需要使用是时候首先导入这个封装的文件
Import request from “../../.....”
Request({
Url:'http://152.136.185.210:7878/api/m5/recommend'
}).then(res=>{logres}).cath(err=>logerr)
29:小程序中的分享
1： 分享总共有两种分享方式
1：点击右上的菜单按钮，之后点击转发
2：点击某一个按钮，直接转发
2：当我们转发某一个小程序时，通常小程序会显示一些信息
通过onShareAppMessage
字段说明默认值
title转发标题当前小程序名称
path转发路径当前页面path,必须以/开头
imageUrl自定义图片路径使用默认截图1
onShareAppMessage: function (options) {
return{
title:'小许',
path:'/pages/home/home.wxml',
imageUrl:'https://img2.baidu.com/it/u=3593822977,2222569124&fm=26&fmt=auto&gp=0.jpg'
}
},
<button size="mini" type="primary" open-type="share">点击分享</button>
30:小程序中跳转
页面跳转有两种方式：通过navigator组件和通过wx的api
navigator组件主要用于页面跳转
属性类型默认值必填说明
targetstringself否在那个目标上发生跳转，默认是当前小程序
urlstring 否当前小程序内的跳转lianjie
Oprn-typestringnavigate否跳转方式
deltanumber1否当open-type为‘navigateBack’时有效，表示回退的层数
1：注意，这里的url以“/”开头，并且不跟后缀名.wxml
open-type 的合法值
值说明最低版本
navigate对应 wx.navigateTo或wx.navigateToMiniProgram的功能
redirect对应 wx.redirectTo的功能
switchTab对应 wx.switchTab的功能
reLaunch对应 wx.reLaunch的功能1.1.0
navigateBack对应 wx.navigateBack的功能1.1.0
exit退出小程序，target="miniProgram"时生效
2:注意：redirect:关闭当前页面，跳转到应用内的的某个页面，但不允许跳转到tabbar页面，并且不能返回
switchTab:跳转到tabbar页面，并且关闭其他所哟有非tabbar页面
Relaunch:关闭所有的页面，打开应用中某个页面可以跳转到tabbar
