一、常用的使用容器组件(此文档只是简单使用,其他属性需要查看官方文档)
(https://developers.weixin.qq.com/miniprogram/dev/component/ )
视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开发能力、无障碍访问1.视图组件
view组件
介绍
普通视图区域
类似于HTML中的div，是块级元素
常用来实现页面布局效果
使用
<view>1</view>scroll-view组件
介绍
可滚动的视图区域
常用来实现滚动列表
例子
<scroll-view scroll-y></scroll-view> 竖轴滚动必须设置高度swiper和swiper-item
介绍
轮播图容器组件和轮播图item组件
使用
.wxml文件
<swiper class='swiper_box' interval='500' autoplay circular indicator-dots>
<swiper-item>
<view class="swiper_item_box box1">1</view>
</swiper-item>
<swiper-item>
<view class="swiper_item_box box2">2</view>
</swiper-item>
<swiper-item>
<view class="swiper_item_box box3">3</view>
</swiper-item>
</swiper>
.wxss
.swiper_box{
width: 100px;
height: 100px;
}
.swiper_item_box {
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
background: greenyellow;
}
.box2 {
background: blue;
}
.box3 {
background: red;
}2.内容组件
text组件
介绍
文本组件
类似于HTML中的span标签，是个行内元素
使用
<text user-select>111111111111111</text>rich-text组件
介绍
富文本组件
支持把HTML字符串渲染为WXML结果
使用
<rich-text nodes="<h2 style='color:red; background-color:blue;'>表情内容</h2>"></rich-text>3.按钮组件
button组件
介绍
按钮组件
功能比HTML的button更丰富
通过open-type属性可以调用微信提供的各种功能
使用
<button type="warn" size="mini" plain loading>123</button>
属性
size // default(默认尺寸) mini(小尺寸)
type // primary(绿色) default(白色) warn(红色)
plain // true/false(按钮是否镂空，背景色透明)
disabled // true/false(是否禁用)
loading // true/false(名称前是否带loading图标)
form-type // submit(提交表单) reset(重置表单)4.image图片组件
使用
<image src="../images/2.jpg" mode="widthFix"></image>
属性
src //主持本地和网络上的图片
mode //指定图片的剪裁、缩放模式
binderror //当错误发生时触发，event.detail = {errMsg}
bindload //当图片载入完毕时触发，event.detail = {height, width}5.页面导航
1.声明式导航
1.导航跳转到tabBar页面
使用
<navigator url="/pages/contactUs/contactUs" open-type="switchTab">123</navigator>
属性
url表示要跳转的页面地址
open-type表示跳转的类型必须为switchTab2.导航跳转到非tabBar页面
使用
<navigator url="/pages/contactUs/contactUs" open-type="navigate">123</navigator>
属性
url表示要跳转的页面地址
open-type表示跳转的类型必须为navigate,非tabBar可以不传3.后退导航
使用
<navigator open-type="navigateBack" delta="1">123</navigator>
属性
open-type表示跳转的类型必须为navigateBack
delta表示后退的层级，为1时可以不写2.编程式导航
1.导航到tabBar页面
方法
wx.switchTab({url: '地址'})
属性
url表示要跳转的页面地址
使用
.wxml
<button bind:tap="clickFn">点击跳转</button>
.js
clickFn(){
wx.switchTab({
url: '/pages/contactUs/contactUs',
})
},2.导航到非tabBar页面
方法
wx.navigateTo({url: '地址',})
属性
url表示要跳转的页面地址
使用
.wxml
<button bind:tap="clickFn">点击跳转</button>
.js
clickFn(){
wx.navigateTo({
url: '/pages/contactUs/contactUs',
})
},3.后退导航
方法
wx.navigateBack({delta:1})
属性
delta表示后退的层级，为1时可以不写
使用
.wxml
<button bind:tap="clickFn">点击跳转</button>
.js
clickFn(){
wx.navigateBack({delta:1})
},3.导航传参
3-1.声明式导航传参
定义
1.navigator组件的url属性用来指定将要跳转到的页面路径,同时页面的路径后面携带参数
参数与路径之间的使用?隔开
参数键与值=连接
不同参数用&隔开
2.不能往tabBar页面传参
使用
<navigator url="/pages/moreape/moreape?id='123'&name='cc'">234</navigator>3-2.编程式导航传参
定义
1.调用wx.navigateTo()方法跳转页面，也可以携带参数
2.不能够往tabBar页面传参
使用
wx.navigateTo({url: "/pages/moreape/moreape?name='ddd'&&id='222'"})4.获取导航传递的参数
定义
通过声明式导航传参和编程式导航传承，可以直接在页面的onload生命周期函数中直接获取到
使用
onLoad(options) {console.log(options);}二、数据绑定
介绍
在data中定义数据
在wxml中使用数据
使用
.js文件
data: {
name:'123',
data:['qwe','name','id'],
obj:{
name:'1',
value:'2'
}, images:'http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280',
images1:'/pages/images/2.jpg'
},
.wxml文件
<image src="{{images}}" mode="widthFix"></image>
<image src="{{images1}}" mode="widthFix"></image>
<view>{{name}}</view>
<view>{{data}}</view>
<view>{{obj.name}}</view>三、事件绑定
tap事件
介绍
手指触摸后马上离开，类似于click事件
绑定方式
bindtap或bind:tap
使用
.wxml文件
<button type="primary" bind:tap="clickFn" data-info='{{value}}'>点击</button>
<button type="primary" bind:tap="clickFn" data-info='aa'>点击</button>
<view>{{name}}</view>
.js文件
data: {
name:'123',
value:'234'
},
clickFn(e){
this.setData({'name':e.target.dataset.info})
}
input事件
介绍
文本框的输入事件
绑定方式
bindinput或bind:input
使用
.wxml
<input value="{{number}}" bindinput="inputFn" data-info='{{name1}}'></input>
//value 绑定data值 bindinput:值变化的方法 data-info:自定义参数
.js
inputFn(e) {
console.log(e.detail.value); //输入框值
console.log(e.target.dataset); //自定义传值
},change事件
介绍
复选框选中改变时触发
绑定方式
bindchange或bind:change事件传参
1.定义方法 data*参数名='值'
2.接收方法 event.target.dataset.参数名四、条件渲染
1.wx:if、wx:elif 和wx:else 条件判断
使用
.wxml
<view wx:if="{{istrue == 1}}">男</view>
<view wx:elif="{{istrue == 2}}">女</view>
<view wx:else>保密</view>
.js
data: {
istrue: 1
},2.hidden条件判断
使用
.wxml
<view hidden="{{istrue == 1}}">是</view>
.js
data: {
istrue: false
},3.block标签使用
介绍
如果一次性判断多个组件标签。<block/>并不是一个组件，它仅仅是一个包裹组件，不会在页面中做出任何渲染，只接受控制属性
使用
<block wx:if="{{true}}">
<view>星星</view>
<view>月亮</view>
<view>地球</view>
</block> 4.if和hidden的区别
1.运行方式不同
a.wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
b.hidden以切换样式的display,控制元素的显示与隐藏
2.使用建议
a.频繁切换时建议使用hidden
b.控制条件复杂时建议使用wx:if、wx:elif 和wx:else进行展示与隐藏切换五、列表渲染
1.wx:for 和 wx:key
使用
.wxml
<view wx:for="{{data}}" wx:key="*this"> 索引:{{index}},值:{{item}} </view>
<view wx:for="{{data1}}" wx:key="id">索引:{{index}},值:{{item.name}}、{{item.id}}</view>
.js
data: ['qwe', 'name', 'id'],
data1:[
{id:'1',name:'n1'},
{id:'2',name:'n2'},
{id:'3',name:'n3'},
],2.手动指定索引和当前项的变量
方法
a.使用wx:for-item可以指定数组当前元素的变量名
b.使用wx:for-index可以指定数组当前下标的变量名
使用
.wxml
<view wx:for="{{data1}}" wx:key="id" wx:for-item='itm' wx:for-index='inx'>新索引:{{inx}},新值:{{itm.name}}、{{itm.id}}</view>
.js
data1:[
{id:'1',name:'n1'},
{id:'2',name:'n2'},
{id:'3',name:'n3'},
], 六、配置
1.全局配置 地址
介绍
app.json配置文件用于小程序的全局进行配置
配置内容
pages数组:配置小程序的页面路径
window对象:设置小程序的状态栏和导航栏、标题、窗口背景色
tabBar对象:配置小程序的tab栏效果
style对象:是否启用新版样式
tabBar配置
"tabBar":{
"color":"#ffffff", //默认文本颜色
"selectedColor":"#000000", //选中文本颜色
"backgroundColor":"#ff00ff", //背景颜色
"borderStyle":"black", //边框颜色 black white
"position":"bottom", //tab栏位置 bottom top
"list":[ //tab栏数量 最少2个 最多5个
{
"pagePath":"pages/index/index", //页面路径
"text":"首页", //文本名
"iconPath":"/images/view.png", //默认图标位置
"selectedIconPath": "/images/viewSelect.png" //选中图标位置
},
{
"pagePath":"pages/page2/page2",
"text":"次页",
"iconPath":"/images/delect.png",
"selectedIconPath": "/images/delectSelect.png"
}
]
},2.局部配置 地址
介绍
局部配置可以覆盖全局配置七、数据请求(网络请求)
1.小程序中网络数据请求限制
处于对安全性方面的考虑，小程序官方对数据接口的请求做出限制：
1.只能请求https类型的接口
2.必须将接口的域名添加到信任的列表中2.配置request合法域名
配置步骤：登录小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项：1.域名只支持https
2.域名不能使用IP地址或localhost
3.域名必须经过icp备案
4.服务器域名一个月内可申请修改5次3.请求
wx.request({
url: 'https://www.escook.cn/api/get', //请求地址
method:'GET', //请求类型 get、post
data:{ //请求参数
name:'zs',
age:18
},
success:(res)=>{ //成功方法
console.log(res);
},
fail:(err)=>{ //失败方法
console.log(err);
},
complete:(res)=>{ //最终方法
console.log(res);
}
})八、页面事件
1.下拉刷新
介绍
下拉刷新是用过手指在屏幕上的下拉滑动操作，从而刷新当前页面数据的行为
启动方式
1.全局开启下拉刷新
在app.json中的window节点中将 enablePullDownRefresh设置为true
{
"window": {
"enablePullDownRefresh": true,
},
}
2.局部启动下拉刷新
在页面的.json配置文件中，将enablePullDownRefresh设置为true
{
enablePullDownRefresh:true
}
3.使用小程序提供的API实现下拉刷新
wx.startPullDownRefresh()
手动关闭下拉功能
wx.stopPullDownRefresh()
属性配置
"backgroundColor": "#f2f2f2", //下拉刷新窗帘的背景颜色
"backgroundTextStyle":"dark" //loading样式，仅支持dark和light
下拉刷新事件
定义
在.js文件中，通onPullDownRefresh()函数即可监听到当前页面下拉刷新
使用
onPullDownRefresh(){
console.log(123);
}
注意
1.在实际开发中，推荐使用第2种方式，为需要的页面单独开启下拉刷新效果
2.在启动下拉刷新以后，如果不手动停止下拉，下拉动作会一直存在，不会弹回去
3.在模拟器中会弹回去，在真机上不会弹回去
2.上拉触底
介绍
上拉触底是通过手指在屏幕上的上拉滑动操作，从而加载更多数据行为
上拉触底事件
定义
在.js文件中，通过onReachBottom函数可以监听到当前页面上的上拉触底事件
使用
onReachBottom(){console.log(234);}
上拉触底配置
介绍
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离
定义
可以在全局或页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离
使用
在app.json文件
{
"window": {
"onReachBottomDistance": 100,
},
}
在页面使用
{
"onReachBottomDistance": 100,
}
注意
小程序默认的触底距离是50px，在实际开发中，可以根据自己的需求修改这个默认值
tabBar组件页面的上拉触底函数触发距离是滚动条到tabBar上面的距离九、生命周期
1.介绍
介绍
1.小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行
2.作用：允许程序员在特定的生命周期时间点上，执行某些特定的操作
3.注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
小程序中生命周期函数的分类
应用生命周期函数:小程序从启动 --> 运行 --> 销毁期间依次调用的那些函数
页面生命周期函数:每个页面从 加载 --> 渲染 --> 销毁期间依次调用的那些函数2.应用的生命周期
定义
1. app.js 是小程序执行的入口文件，在app.js中必须调用App()函数，且只能调用一次。其中，App()函数是用来注册并执行小程序的
2.App(Object)函数接收一个Object参数，可以通过这个Object参数，指定小程序的应用生命周期函数
使用
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () { },
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) { },
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () { },
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) { }
})3.页面生命周期
定义
1.每个小程序页面，拥有自己的.js文件，且必须调用Page()函数。其中Page()函数用来注册小程序页面
2.Page(Object)函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数
使用
Page({
/**
* 页面的初始数据
*/
data: { },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { },
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { },
/**
* 生命周期函数--监听页面显示
*/
onShow: function () { },
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { },
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { },
})十、wxs
1.介绍
介绍
wxs是小程序的一套脚本语言，可以构建出页面结构
应用场景
小程序中wxs的典型应用场景就是过滤器，在渲染之前对data中的数据做一层包装处理，处理的结果最终会渲染到页面上。
wxs的数据类型
number 数值类型
string 字符串类型
boolean 布尔类型
object 对象类型
function 函数类型
array 数组类型
date 日期类型
regexp 正则
wxs遵循CommonJS模块化规范
介绍
CommonJS是javascript的模块化规范之一，小程序的脚本语言wxs遵循了CommonJS规范，因此，使用wxs时的体验和使用node.js的体验比较相似。
module对象
每个wxs都是独立的模块，每个模块均有一个内置的module对象，每个模块都有自己独立的作用域。
module.exports
由于wxs拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，
通过module.exports属性，可以对外共享本模块的私有变量与函数。
require函数
在wxs模块中引用其他wxs文件模块，可以使用require函数。
注意
data 中的数据不发生变化。
wxs不支持类似于es6及以上的语法形式
wxs的特点
1.没有兼容性
wxs不依赖于运行时的基础库版本，可以在所有版本的小程序中运行
2.与js不同
本质上，wxs和js是不同的语法
3.隔离性
wxs的运行环境和其他js代码是隔开的
wxs中不能调用其他js文件中定义的函数也不能调用小程序提供的API
4.不能作为事件回调
5.性能好
iso设备上比js运行快
android设备上二者运行效率无差异
2.使用
1.内嵌wxs脚本
定义
wxs代码可以编写在wxml文件中的 <wxs></wxs>标签内，就像 javascript代码可以编写在html文件中的<script></script>标签内一样。
wxml文件中的每个<wxs></wxs>标签，必须提供一个module属性，用来指定当前<wxs></wxs>标签的模块名。在单个wxml文件内，建议其值唯一。
module 属性值的命名必须符合下面两个规则：
首字符必须是：字母（a-z A-Z），下划线（_）
剩余字符可以是：字母（a-z A-Z），下划线（_）， 数字（0-9）
使用
.wxml文件
<view>{{m1.toUpper('name')}}</view>
<wxs module="m1">
module.exports.toUpper = function(str){
return str.trim().toUpperCase()
}
</wxs>2.外链的wxs脚本
使用
.wxs文件
function toUpper(str) {
return str.trim().toUpperCase()
}
module.exports = {
toUpper:toUpper
}
.wxml
<view>{{m2.toUpper('name')}}</view>
<wxs src='../utils/tools.wxs' module="m2"></wxs>
属性解释
module用来指定标签模型名，作为当前页面访问模块的标签名称
src用来指定当前wxs标签要引入的脚本路径十一、其他
1.运算符
介绍
三元运算符 条件?值1:值2
算数运算符 +-*/
例子
.wxml文件
<view>{{number>5? 'cc':'dd'}}</view>
.js文件
data: {
number: Math.floor(Math.random()*10)
}2.target和currentTarget的区别
1.target是触发改事件的源头组件
2.currentTarget则是当前事件所绑定的组件3.事件处理函数data数据赋值
方法
通过this.setData()修改data数据
使用
.wxml
<button type="primary" bind:tap="clickFn">点击</button>
<view>{{name}}</view>
.js文件
data: {
name:'123',
},
clickFn(e){
this.setData({'name':'ccdd'})
},4.跨域和ajax
a.跨域问题只存在于基础浏览器对的web开发中，由于小程序的宿主环境不是浏览器，而是微信客户端，所有小程序不存在浏览器的跨域问题
b.ajax技术的核心是依赖于浏览器的XMLHTTPRequest这个对象，由于小程序宿主环境是微信客户端，所有小程序中不能叫做发起ajax请求，而是叫做 发起网络数据请求5.使用css变量
1.在app.wxss中
page {
--main-bg-color: red;
}
2.在使用.wxss中
.menu_box{
background: var(--main-bg-color);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
