微信小程序
一、微信小程序
1. 原生开发 用wx小程序 提供的语法开发
2. vue开发 用vue结合框架写小程序 uni-app wepy mpvue
3. react开发 用react结合 taro 框架开发
微信公众平台官网：https://mp.weixin.qq.com/
小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
二、小程序的目录结构
xxx.json 小程序或者页面配置
xxx.js 写js业务逻辑
xxx.wxml wxhtml 用的是wx内置的组件
xxx.wxss wxcss 微信的样式
小程序都需要一个app实例 （根实例）包含了若干个页面（实例）
app.js 小程序的实例 小程序的入口文件
app.json 小程序的全局配置
app.wxss 小程序的全局样式
pages 小程序里的页面
-home home页面
|
home.js home页面实例
home.json home页面的配置文件
home.wxss home页面的样式
home.wxml home的页面骨架
三、小程序中的样式
app.wxss 全局样式
pageName.wxss 页面的局部样式
1、 样式语法：正常css的语法
2、 全局和局部冲突：就近原则
3、 响应式 rpx 或者 vw/vh
4、 小程序规定 不管什么手机 width 恒定为 750rpx
5、小程序设计稿的尺寸一般为 750*1136
四、小程序的页面骨架（详情见文档）
xxx.wxml 文件
只能使用小程序内置的组件标签
例子：
<view>这是小程序中的块元素相当于div</view>
<text>这里是小程序的行内元素相当于span</text>
五、小程序的配置 （详情见文档）
app.json 全局配置
pageName.json 页面配置
注意：
全局和局部冲突：就近原则
六、小程序逻辑
1. 小程序的生命周期
小程序启动（全局只触发一次）
onLaunch: function () {
console.log('小程序启动')
},
小程序隐藏
onHide: function () {
console.log('小程序进入后台 隐藏')
},
小程序显示
onShow: function (options) {
console.log('小程序进入前台 显示')
},
小程序发生脚本错误
onError: function (msg) {
console.log(msg)
}
2. 页面的生命周期
页面加载
onLoad(){
// 页面重新加载的时候才会触发 tab中切换页面没有销毁 只会触发一次
console.log('页面加载')
},
页面渲染完成
onReady(){
console.log('页面渲染完成之后触发')
},
页面卸载
onUnload(){
// 页面卸载的时候会触发 缓存起来就不会触发
console.log('页面卸载')
},
页面显示
onShow(){
console.log('页面显示')
},
页面隐藏
onHide(){
console.log('页面隐藏')
},
提供的功能函数
onPullDownRefresh(){
console.log('下拉刷新了')
},
onReachBottom(){
console.log('上拉')
}
七、小程序的数据绑定
page({
data:{
name:"韩梅梅",
arr:[1,2,3,4],
obj:{us:123,ps:456},
length:1
}
})
1、页面对象下 data里的数据可以通过{{}} 在视图中进行绑定 {{name}}
2、如果要修改数据 页面实例this.setData({要修改的key:value})
this.setData({name:hehe})
八、事件
小程序的事件是特制事件和原生js不一样 tap longtap ..
函数写在js文件里，标签绑定函数
传参是以data开头的属性进行传参 在事件对象e里进行接受
<button bindtap="处理函数"
data-hehe='123'
data-obj="{{ {us:123,ps:456} }}
data-arr = "{{ [1,2,3,4,5] }}"
></button>
changeName(e){
console.log(e)
let {hehe,xixi} = e.target.dataset
this.setData({name:hehe})
}
函数绑定另一个写法
<button bind:tap="changeName"> 改名</button>
九、小程序中的指令
1、列表渲染 wx：for（需要key）
循环数组
<text wx:for="{{ arr }}">{{index}}:{{item}}</text>
循环对象
<text wx:for ="{{obj}}">{{index}}:{{item}}</text>
更改 item和index的使用名字
<text
wx:for="{{obj}}"
wx:for-index='hehe'
wx:for-item='xixi'
wx:key = 'hehe'
>{{hehe}}{{xixi}}</text>
2、条件渲染 wx：if
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
注意：block标签不渲染
十、小程序中的网络请求
小程序的网络请求 使用的是内置的wx.request的api 使用方式类似于jq的ajax
wx.request({
url: url, 请求路径
data:{},· 请求传参
method:"GET", 请求方法
success:(data)=>{ 成功的回调
console.log('请求成功')
let {banners} = data.data
console.log(banners)
this.setData({imgs:banners})
},
fail(){ 失败的回调
console.log('请求失败')
}
})
发布线上的要求
1. 请求的域名必须是https协议
2. 请求的域名必须在合法域名列表里
3. 小程序没有跨域问题
开发环境下
忽略 https 安全域名的验证（详情-本地设置-不校验...）
网络请求的回调里 经常会找不到this 换成箭头函数就行了
十一、小程序路由
配合button是编程式导航
1、跳转到tab页面
wx.switchTab({
url: '/pages/my/my',
fail(err){
console.log(err)
}
})
2、通过navagator 跳转到非tabbar 页面（有返回）
wx.navigateTo({
url: '/pages/route/route',
})
3、通过redireact 跳转到非tabbar 页面（没有返回）
wx.redirectTo({
url: '/pages/route/route?us=123&ps=123',
})
4、跳转到任何界面
wx.reLaunch({
// url: '/pages/route/route',
url: '/pages/my/my',
})
声明式导航：
<navigator url="/pages/route/route" >声明式导航</navigator>
路由传参（参数写在路径后面）
A、wx.redirectTo({
url: '/pages/route/route?us=123&ps=123',
})
B、<navigator url="/pages/route/route?us=123&ps=123" >声明式导航</navigator>
注意：参数在onLoad生命周期里option接收
十二、地图组件map
<map
id="map"
rotate = '{{rotate}}' 旋转
longitude="{{longitude}}" 经度
latitude="{{latitude}}" 纬度
scale="14" 缩放
style="width: 100vw; height: 50vh;"
controls="{{controls}}" 控件
bindcontroltap="controltap" 点击控件的方法
markers="{{markers}}" 标记
bindmarkertap="markertap" 点击标记的方法
polyline="{{polyline}}" 路线
bindregionchange="regionchange" 视野发生改变触发
show-location 当前定位
></map>
1、控件的配置
data:{
latitude:0,
longitude:0,
rotate:45,
controls:[
{
id: 1,
iconPath: '/common/icon/mobile.png',
position: {
left: 0,
top: 400 ,
width: 40,
height: 40
},
clickable: true
},
// 点击控件
controltap(e){
let {controlId} = e
console.log(e)
if(controlId===1){
this.getLocation()
}
},
2、标记的配置
markers:[{
iconPath: "/common/tabbar/cart.png",
title:"呵呵哒",
id: 0,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
},
// 点击markes 事件
markertap(e){
console.log(e)
},
3、路线的配置
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
}, {
longitude: 113.324520,
latitude: 23.21229
}],
color:"#FF0000DD",
width: 2,
dottedLine: true
}]
//视野发生改变触发
regionchange(e){
console.log(e)
},
4、一些api
A、获取当前位置
wx.getLocation({
type: 'wgs84',
success:(res)=>{
console.log(res)
let {latitude,longitude} = res
this.setData({latitude,longitude})
},
fail(err){
console.log(err)
}
})
B、跳转到微信地图
wx.openLocation({
latitude: 23.099999,
longitude: 113.324520,
})
C、选择地理位置
wx.chooseLocation({
success(res){
console.log('选择位置',res)
}
})
十三、其他常用api
1、消息提示框
显示
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000 2秒自动关闭
})
关闭
wx.hideToast({
complete: (res) => {},
})
2、加载提示框
显示
wx.showLoading({
title: '加载中',
})
关闭
wx.hideLoading({
complete: (res) => {},
})
3、显示模态对话框
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
4、显示操作菜单
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
console.log(res.tapIndex)
},
fail (res) {
console.log(res.errMsg)
}
})
5、动态设置当前页面的标题
wx.setNavigationBarTitle({
title: '当前页面'
})
6、数据存储
添加
wx.setStorageSync('test', {us:123,ps:456})
查询
wx.getStorageSync('user')
删除一个
wx.removeStorageSync('test')
清空
wx.clearStorageSync()
7、监听网络环境发生改变
wx.onNetworkStatusChange((result) => {
console.log(result)
let {networkType} = result
if(networkType !== 'wifi'){
wx.showModal({
title:`你的网络环境变化${networkType}是否继续`,
success(res){
console.log(res)
}
})
}
})
8、拨打电话
wx.makePhoneCall({
phoneNumber: '110' //仅为示例，并非真实的电话号码
})
9、调起客户端扫码界面进行扫码
wx.scanCode({
success: (res)=> {
console.log(res)
let {result} = res
this.setData({result})
}
})
知识点补充
1、模块可以挂载到app实例上
const config = require('./config/index')
App({
config
})
组件中通过getApp()引入
const {
config
} = getApp()
2、app.json的pages的第一个页面是默认加载的页面
"pages": [
"pages/home/home",
"pages/category/category",
"pages/shopcart/shopcart",
"pages/my/my",
"pages/web/web"
],
3、wx.request需要二次封装
注意：wx默认body上传格式是application/json，有的请求需要的是application/x-www-form-urlencoded
4、公用模板template
a、使用 name 属性，作为模板的名字，里面写代码
<template name='shopCartModal'></template>
b、页面中引入
<import src='/template/addCartModal/addCartModel.wxml' />
c、页面中使用，is和模板name绑定，data给模板传参
<template is='shopCartModal' data="{{ showModal,info,imgServer,range ,pickerValue}}"></template>
d、页面的wxss中引入模板的样式文件
@import '/template/addCartModal/addCartModal.wxss';
5、通过catchtap绑定并阻止事件冒泡
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
点inner，触发tap3和tap2，因为tap2是catchtap，禁止了事件冒泡，所以不会触发tap1
6、通过web-view跳转页面
a、小程序先跳转一个空白页面
wx.navigateTo({
url: `/pages/web/web?weburl=${weburl}`,
})
b、空白页面 通过web-view 渲染网页
<web-view src='{{weburl}}'></web-view>
浙公网安备 33010602011771号