微信小程序常用知识点
微信小程序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEpb5tol-1600061439777)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20200629113215495.png)]
应用程序主流架构
前端面向客户，前端向后端发送http请求，获取数据
前端分为pc端（桌面应用=>基于操作系统，web应用=>通过浏览器显示），移动端（h5，原生APP，基于app的二级生态=>基于微信等平台的程序，例如微信小程序）
h5：移动端网页
1.优点：不需要下载安装，不占用手机存储空间，方便快捷，地址传播成本低，开发门槛低，成本低（跨平台，只基于浏览器），推广成本低，技术栈
2.缺点：发送网络请求，请求数据有延迟，会有空白时间
3.使用场景：适用于信息统计 => 投票.报名.用户反馈.表单收集，场景宣传 => 活动宣传小游戏婚礼邀请
原生APP：基于手机操作系统开发的应用（安卓，ios）
1.优点：更加精细，使用更加流畅，不需要重复加载，有缓存，可以使用系统的底层功能
2.缺点：开发周期长，开发成本高，不会自动更新，需要权限开启，占据固定内存空间，技术栈要求高，开发成本高，审核机制严格，质量要求高，更新慢，推广成本高（广告投放）
3.使用场景：体验要求高 => 音视频缓存.响应速度快，功能丰富
基于app的二级生态：基于微信（公众号，小程序），百度，qq等平台的程序
公众号：更相似于h5，打开网页，支持发送信息响应功能
1.优点：不需要下载，支持微信自带的交互功能，支持h5网页嵌入
2.缺点：不适合大型功能，体验较差
3.使用场景：消息推送，文章发布，简单交互=>业务办理
微信小程序：功能介于h5和原生APP之间
1.优点：使用门槛低，可以缓存，操作足够流畅，内存占用小，查找便捷，易于传播，开发生态好，有审核，审核快，推广成本低，市场需求大
2.缺点：不支持其他平台使用
3.使用场景：消息推送，文章发布，简单交互=>业务办理
注：微信小程序单包大小不大于2MB，分包不超于8MB，尽量使用远程图片
Vant Weapp使用
//npm init 生成 package.json
//npm i @vant/weapp -S --production
//打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件
// app.json 全局使用
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
app.json 配置
//app.json 主配置文件
{
"{
"pages":[
"pages/index/index",//入口文件
"pages/logs/logs"
],
"window":{
//窗口相关配置
//导航栏背景色
"navigationBarBackgroundColor":"#ffdddd",
//导航标题色，只有 black 和 white
"navigationBarTextStyle":"black",
//标题文本
"navigationBarTitleText":"小程序",
//下拉后窗口背景色
"backgroundColor":"#000000",
//下拉后背景字体，loading 图样式，只有 dark 和 light
"backgroundTextStyle":"light",
//是否支持下拉刷新
"enablePullDownRefresh":true
},
"tabBar":{
//标签栏设置
"list":[{
//至少两个对象，最多五个
"pagePath":"pages/index/index", //地址
"text":"首页",//显示名称
"iconPath":"images/home.png",//图标显示
"selectedIconPath":"images/home-selected.png" //选中状态
},{
"pagePath":"pages/logs/logs",
"text":"日志查询",
"iconPath":"images/search.png",
"selectedIconPath":"images/search-selected.png"
}],
//tabBar 处于顶部和底部，只有两个值：top 和 bottom(默认),属性如果设置为 top，则不会显示 icon
"position":"top",
//设置导航颜色
"color":"#000",
//设置导航栏的背景色
"backgroundColor":"#eee",
//设置选中的颜色
"selectedColor":"#06f",
"borderStyle":"white",
//打开调试功能
"debug":true
}
"style": "v2",
"sitemapLocation": "sitemap.json"
}"
}
//当前页面json
"navigationBarTitleText": "菜谱分类"
生命周期
//生命周期函数
onLaunch() {
//小程序初始化完成时，全局只触发一次
},
onShow(){
//页面显示时执行，后台进入到前台
},
onLoad: function () {
//页面加载执行
},
onReady(){
//首次渲染完成时执行
},
onHide(){
//页面隐藏时执行
},
onUnload(){
//页面卸载时执行
},
onPullDownRefresh() {
//用户下拉刷新
},
onReachBottom() {
//用户下拉触底
},
onPageScroll(calcu){
//页面滚动时触发,参数时一个对象，返回垂直滚动对的距离
},
onShareAppMessage() {
//用户分享时调用
}
//组件内的生命周期函数
Component({
created:function({
//组件被创建，无法获取data无法使用this.setData
}),
attached:function(){
//组件被添加到页面上，可以获取data
},
detached:function(){
//组件在当前页面被移除
},
lifeTimes:{
//兼容性写法,优先级比较高
created:function({
//组件被创建，无法获取data无法使用this.setData
}),
},
pageLifetimes:{
show:function(){
//页面被显示
},
hide:function(){
//页面被隐藏
},
resize:function(){
//页面尺寸变化
}
}
})
封装axios
//封装axios
//url.js,设置请求地址
const BASE_URL = "地址";
module.exports = {
BASE_URL
}
//request.js , 封装axios ，接收参数返回数据
//引入公共接口地址
const url = require("./url");
function request(obj) {
return new Promise ((resolve,reject)=>{
wx.request({
url: url.BASE_URL + obj.apiUrl, //接口地址
method :obj.method, //请求方式
data : obj.data, //传递数据
success(res) {
resolve(res)
},
fail(error) {
reject(error)
}
})
})
}
module.exports = {
request
}
//api.js ， 向封装的request传递地址，方式，传参，返回Promise对象
const api = require ("./request");
module.exports = {
//获取接口
getBanner(){
return api.request({
apiUrl:"接口地址",method:"get",data:{
}})
}
}
模板样式
//设置模板，只定义wxml，wxss和js写在引入组件位置
<template name="header">内容</template>
//进行复用
<import src="../templates/header.wxml"/> //引入
<template is="header" data="{
{模板需要的数据:...header,key:value}}"/> //调用并传参
//在wxss中引入其他wxss文件
@import "文件地址"
//在wxml页面引入其他wxml文件,可以使用import和include
<include src="文件地址" /> //在哪个位置引入就显示在哪
//标签属性绑定
id class style //可以直接添加属性值，或通过{
{}}变量动态绑定
data-title="views" //自定义属性
class="{
{index==ind?'active':''}}"
//wxss样式设置
添加hover-class //点击修改样式
//wsx使用
//RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
//每一条正则表达式模式对应一个RegExp实例,当使用构造器函数创建正则表达式的时候，必须使用正常的字符串避开规则（在字符串中加入前导字符\）是必须的。
例如，下面的两条语句是等价的：
re=new RegExp("\\w+");
re=/\w+/
//引入
<wxs src="../wxs/image.wxs" module="demo" />
<image src="http://a.itying.com/{
{demo.upimage(v.img_url)}}" class="image" />
//直接在wxml页面使用wxs,每个模块都是独立的作用于，需要通过module.exports暴露其私有的属性和方法
<wxs module="demo">
function upimage(image){
var reg = getRegExp('\\', "g")
var font = image.replace(reg,'/')
console.log('http://a.itying.com/'+font)
return font;
}
module.exports = {
upimage:upimage,
}
<wxs/>
事件绑定
//事件绑定
bingtap="tapGreeting"
tapGreeting(event){
this.setData({
//对属性进行设置
greeting:"";//修改的data里面的数据，也可调用方法进行传参修改数据进行赋值
})
}
//三元表达式,可动态绑定class样式
{
{
obj ? "obj" :"不存在"}}
capture-bind:tap 捕获状态处理数据,从外向内处理事件
capture-catch:tap 捕获状态阻止数据处理
mut-bind 互斥事件绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RbiKtddD-1600061439779)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20200703194221428.png)]
分支显示隐藏
//隐藏显示，组件不渲染
wx:if="{
{变量名或者表达式}}" wx:else //和if相对应
<view wx:if="{
{show==100}}">满分</view>
<view wx:elif="{
{show>=80}}">优秀</view>
<view wx:elif="{
{show>=60}}">及格</view>
<view wx:else>不及格</view>
hidden="{
{false}}" //显示隐藏，隐藏内容
循环数组 wx:for
//数组循环渲染
wx:for="{
{arr}}"
{
{
item}} //列表项内容 wx:for-item="v" 另定义
{
{
index}} //列表索引值 wx:for-index="i" 另定义
arr:[
':apple', //可显示为图标
':banana'
]
wx:key="index" 为index值，数组改变顺序重新渲染，状态是复用而不是新建会延续原先index位置的状态
wx:key="*this" *this是小程序的保留字，代表当前的item
图片，icon，文本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smy8Rqu3-1600061439780)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20200704162106675.png)]
// image 显示图片
<image
mode="aspectFit" //保持比例图片显示完整 aspectFill保持比例并占满容器 widthFix缩放模式，高度自适应
src="图片地址"
show-menu-by-longpress="{
{true}}" //开启长按图片显示识别小程序码菜单
/>
height:100vh; //视口宽度，自动百分百
background-size:contain;
顶部外边距产生合并，在外部盒子添加overflow:hideeen;
//icon自关闭组件
<icon type="info" color="#ccc" size="20"/> //serch,suecss,cacel...
//text 显示文本
<rich-text nodes="{
{nodes}}"/> //节点,渲染成标签，每一个节点都是对象
nodes:[
{
name:"img",
attrs:{
class:"image",
src:"图片地址"
}
},
{
name:"h3",
attrs:{
class:"header"
},
children:[
{
type:'text', //节点类型
text:"hello"
}
]
}
]
大图渲染
let id = event.currentTarget.id;
let images = []
this.data.shopContent.pics.map((itme)=>{
images.push(itme.pics_big)
})
//渲染
wx.previewImage({
urls: images,
current :images[id]
})
button按钮组件
<button></button> //默认占据一整行
type:default 白色 primary 绿色 warn 红色
size:default 默认大小，mini 迷你大小
plain：true/false 是否镂空
form-type:submit 提交表单 reset 重置表单
open-type:微信开放能力，绑定事件
button::after{
border:none; //边框设置为空
}
滚动 scroll
//滚动视图
<scroll-view
scroll-y="{
{true}}" //设置滚动方向，y垂直
style="height:180px"
scroll-into-view="{
{data中变量接受id值}}" //指定当前滚动显示的对象，通过内容的id决定
scroll-with-animation="{
{true}}" //添加动画效果
>
//滚动内容
</scroll-view>
轮播图 swiper
<swiper
autoplay='{
{true}}' //是否自动轮播
indicator-dots="{
{true}}" //指示器的显示和隐藏
indicator-color="" //指示器颜色
indicator-active-color="" //激活状态下指示器颜色
interval="{
{2000}}" //自动切换时间间隔
circular="{
{true}}" //是否采用衔接滑动
current="{
{ind}}" //切换的位置
>
<block wx:for="{
{images}}"> //不占用标签位置
<swiper-item> //幻灯片每一项内容
<img src="{
{item}}"/>
</swiper-item>
</block>
</swiper>
移动区域 move
//movable-area 在页面自由移动
<movable-area> //可移动区域
<movable-view
diection:"" //控制移动方向,none不能移动，all任意方向，vertical垂直方向，horizontal水平方向
inertia="{
{true}}" //产生惯性
out-of-bounds="{
{true}}" //设置可越过可移动的区域，松开会自动弹回
x="30", //控制移动的视图在水平和垂直的初始位置
y="30",
> //需要移动的视图
</movable-view>
</movable-area>
进度条
<progress
percent="30" //当前所占百分比
activeColor="#ccc" //样式颜色
/>
form 表单
<form bindsubmit="formSubmit"> //事件处理
<label for="silder"> //解释说明，和silder的id绑定
<text>silder</text>
</label>
<silder id="silder" name="silder" show-value /> //滑动silder实时显示值
<input
type:"text"
name:"text"
placeholder="text"
bindinput="事件名" //输入事件,实时获取输入内容
/>
<textarea
bindinput="事件名"
/>
<checkbox-group name="checkbox" bindChange="改变选择事件"> //一组复选框内容，获取value绑定的值
<label>
<text>复选框1<text>
<checkbox value="1"/>
</label>
<label>
<text>复选框2<text>
<checkbox value="2" checked="{
{控制是否选中}}"/>
</label>
</checkbox-group>
<checkbox-group name="radio" bindChange="改变选择事件"> //一组单选框内容
<label>
<text>单选框1<text>
<radio value="1"/>
</label>
<label>
<text>单选框2<text>
<radio value="2"/>
</label>
</checkbox-group>
<button from-type="submit">提交</button> //reset重置,只收集带name属性的数据
</form>
formSubmit(event){
console.log(event.detail.value)
}
//开关标签
<switch></switch>
弹框选择器，可配合from表单使用
//picker在屏幕底部弹出选择器 时间选择器，日期选择器，省市区选择器，通过mode改变类型
<picker
range="{
{items}}" //选择范围，项目
bindchange="改变选择事件"，
mode='selector' //设置选择器类型
>
<input type='text' disabled='true' value='{
{array[index]}}' />
</picker>
//日期选择器 需配置开始时间，结束时间
<picker bindchange="onChange" mode="date" id="picker" value='{
{startDate}}' start='{
{startDate}}' end='{
{endDate}}'>
<input type="text" disabled='true' value='{
{date}}' />
</picker>
startDate: util.formatTime(new Date()),
endDate : '2030-12-31',
onChange : function (e) {
this.setData({
date : e.detail.value
});
},
audio 添加音频
<audio
poster="显示图片地址"
src="音频地址"
author="音频作者"
name="音频名称"
controls //控制音频播放
bindplay="play" //播放音频时执行的事件
bindpause="pause" //暂停音频时执行的事件
bindended="ended" //结束音频时执行的事件
/>
video 添加视频
<video
poster="显示图片地址"
src="视频地址"
objectFit="cover" //视频填充方式
controls
bindplay="play" //播放视频时执行的事件
bindpause="pause" //暂停视频时执行的事件
bindended="ended" //结束视频时执行的事件
/>
map 地图组件
<map
longitude="117.32" //经度值
latitude="36.666" //纬度值
scale="" //缩放比例，5
markers="{
{markers}}" //地图添加标记,数组
/>
markers:[
{
id:0,
longitude:"117.32" //经度值
latitude:"36.666", //纬度值
iconPath:"",//标记图标地址
width:22, //图标宽度
height:40,
callout:{
content:"", //提示字
fontSize:14, //可直接设置wxss属性
color:"#ccc",
padding:8
}
}
]
navigator 页面跳转并传参
//navigator 创建小程序的页面和页面之前的连接,跳转非tabbar页面
//switchTab打开tabbar页面
//reLaunch打开任意界面
<navigator
open-type="switchTab" //切换标签 navigate保留当前页面，跳转其他页面可返回
//redirectTo 关掉当前打开的页面，进入新的页面
url="/pages/index/index?id=1000" //切换的地址,并传参
>
demo
</navigator>
onLoad(options){
//页面加载生命周期接收
console.log(options);
open-type //设置打开类型
bindViewTap:function(event){
wx.navigateTo({
//跳转打开新页面可返回,redirectTo重定向
url: `/pages/vehicles/show?id=${
event.target.dataset.id}`,
})
}
wx.showToast({
//弹框提示
title: '暂不支持',
icon:"none"
})
html标签渲染
//rich-text
<rich-text nodes="{
{渲染的节点}}"></rich-text>
动画设置
upshow(){
let show = !this.data.show;
let animation = wx.createAnimation({
duration: 600, //动画时间
timingFunction: 'ease', //显示类型
})
setTimeout(()=>{
this.fadeIn(animation,show);//调用显示动画
},300)
},
fadeIn(animation,show){
if(!show){
animation.height('320rpx').step();
}else{
animation.height('160rpx').step();
}
this.setData({
show:show,
animationData: animation.export()//动画实例的export方法导出动画数据传递给组件的animation属性
})
},
封装组件
//创建子组件
创建component => star => star.js/json/wxml/wxss
图片放在star文件夹内
//父组件调用
//index.json
"usingComponents": {
"star":"../../component/star/star" //进行注册
}
//index.wxml
<star></star> //进行调用
//父组件向子组件传参
<star show="{
{show}}"></star>
//子组件接收
properties: {
show:Boolean,
show:{
//对象的形式设置默认值
type:Boolean,
value:true
}
},
//子组件调用父组件方法
<star show="{
{show}}" bind:trigger="upshow"></star> //子组件调用的方法，及调用父组件的方法名
//子组件在methods定义方法
methods: {
upfather(){
this.triggerEvent("trigger","传参"，"冒泡，捕获") //调用父组件绑定的要调用的方法
}
}
//父组件调用子组件方法
<star show="{
{show}}" id="id名" ></star> //通过id名获取组件实例
updata(){
//通过id名获取想改变的组件对象
let setdata = this.selectComponent("id名");
setdata.子组件方法名(evt.detail.传参值)
}
//子组件使用父组件的样式
Component({
externalClasses:['aaa']
})
<view class ="aaa"></view>
<star show="{
{show}}" aaa="bbb"></star>
.bbb{
color:"red"
}
//slot插槽，添加内容，添加多个插槽需要设置name
Component({
multipleSlots:true //允许使用多插槽
})
<slot name = "{
{index}}" />
<view slot = "{
{0}}"></view>
if(this.length>=3){
this.setData=({
a:true;
})
}else{
this.setData=({
a:false;
})
}
//两种方式结果相等
this.setData=({
a:this.length>=3;
})
使用后端语言上架小程序及使用云服务对比
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IC7Doio-1600061439782)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20200705223943443.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuI7gUfV-1600061439783)(C:\Users\86183\AppData\Roaming\Typora\typora-user-images\image-20200705223948695.png)]
云开发：在一个部署好的环境，前端直接以函数对的形式使用各种服务，完成各种操作
云函数=> 云存储，云数据库（前端使用函数获取数据，函数即服务，弱化了后端服务器的概念）
两行隐藏
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
退出状态
每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据。
代码示例：
{
"restartStrategy": "homePageAndLatestPage"
}
Page({
onLoad: function() {
var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据
if (prevExitState !== undefined) {
// 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到
prevExitState.myDataField === 'myData'
}
},
onSaveExitState: function() {
var exitState = {
myDataField: 'myData' } // 需要保存的数据
return {
data: exitState,
expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻
}
}
})
css
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
退出状态
每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据。
代码示例：
{
"restartStrategy": "homePageAndLatestPage"
}
Page({
onLoad: function() {
var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据
if (prevExitState !== undefined) {
// 如果是根据 restartStrategy 配置进行的冷启动，就可以获取到
prevExitState.myDataField === 'myData'
}
},
onSaveExitState: function() {
var exitState = {
myDataField: 'myData' } // 需要保存的数据
return {
data: exitState,
expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻
}
}
})