微信小程序常用知识点

微信小程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

<swiperautoplay='{{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-viewdiection:"" //控制移动方向,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实时显示值<inputtype:"text"name:"text"placeholder="text"bindinput="事件名"   //输入事件,实时获取输入内容/><textareabindinput="事件名"/><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改变类型
<pickerrange="{{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"  //视频填充方式controlsbindplay="play"  //播放视频时执行的事件bindpause="pause"  //暂停视频时执行的事件bindended="ended"   //结束视频时执行的事件
/>

map 地图组件

<maplongitude="117.32" //经度值latitude="36.666"  //纬度值scale="" //缩放比例，5<scale<18markers="{{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打开任意界面
<navigatoropen-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 // 超时时刻}}
})
cssoverflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;

退出状态

代码示例：

{"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 // 超时时刻}}
})