微信小程序-工具盒子

注册微信小程序获取APPID 创建项目时选用APPID

小程序文件结构与传统web对比 {#小程序文件结构与传统web对比}

| 传统web | 微信小程序 | |------------|------------| | HTML | WXML | | CSS | WXSS | | Javascript | Javascript | | 配置:无 | JSON |

新建文件夹 {#新建文件夹}

app.json下 pages输入文件名会自动创建

app.json认识 {#app-json认识}

TabBar底部导航 {#TabBar底部导航}

字段解释

|--------------------------------------------------------------------------------| | pagePath：跳转的路径 text：名字描述 iconpath：未选中时的图标路径 selectedIconPath:选中时的图标路径 |

app.json list最少2个

view组件 {#view组件}

容器 div = view 具有块级元素特点

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | < view style = "width: 100%;height: 200px;background-color: antiquewhite;" > < text class = "d1" > 数据包 </ text > < image style = "width: 750rpx;" src = "/images/11.webp" /> </ view > |

text组件 {#text组件}

文本 span = text 具有行级元素特点

|---------------------------------------------| | < text class = "d1" > 数据包 </ text > |

图片引入 {#图片引入}

图片 img = image 具有行内块级元素特点

image不设置宽高时，有默认宽高 image可以只写组件头，不写组件尾（单标签形式）。应在组件头用"/"关闭。

背景图片在行内样式时可以加载本地图片，写到wxss中只能加载网络图片

|---------------------------------------------------------------------| | < image style = "width: 750rpx;" src = "/images/11.webp" /> |

rpx自适应 {#rpx自适应}

750rpx就是全屏

可以在组件头中写行内样式，也可在wxss中写样式（自动引入）

rpx: 自适应屏幕宽度尺寸。规定屏幕宽为750份，每份为1rpx。

在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，1rpx = 0.5px = 1物理像素

flex布局 {#flex布局}

任何容器都可以指定为Flex布局，任何子组件都可以设置宽高
父组件

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 设置成弹性盒子：display: flex; 指定主轴方向：flex-direction: column; 指定是否换行：flex-wrap:wrap; 指定在主轴对齐方式：justify-content:space-between|space-around; 指定在交叉轴对齐方式:align-items:center; |

子组件

flex:定义了项目的缩放比例

修改每个界面的顶部名字 {#修改每个界面的顶部名字}

|-----------------------------------------------------------| | //在对应界面的....json中 "navigationBarTitleText" : "列表" |

自定义头部 {#自定义头部}

|---------------------------------------------------------| | //在对应的界面的json配置文件中 "navigationStyle" : "custom" |

数据绑定 {#数据绑定}

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |  < view > {{message}} </ view >  < text > {{age}} </ text >  < text > {{student.stname}} </ text >  < text > {{isture}} </ text > |

数据

|--------------------------------------------------------------------------------------------------------------------------------------------| | data : { message : '你好' , age : 10 , student :{ id : 10 , stname : '李四' , address : '湖南湘潭' , height : '180cm' }, isture : true , } |

运算 {#运算}

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |  < view hidden = "{{age==11 ? true:false}}" > 你可以看见嘛 </ view > < view > {{a+b+c}} </ view > < view > {{'helo'+5}} </ view > < view > {{8%5==0 ? '偶数':'奇数'}} </ view > |

for循环 {#for循环}

数据

多选框是否勾选 {#多选框是否勾选}

|--------------------------------------------------------------------------------| |  < checkbox checked = "{{ture}}" > </ checkbox > |

隐藏显示 {#隐藏显示}

|-------------------------------------------------------------------------------------------| | //hidden true/false < view hidden = "{{age==11 ? true:false}}" > 你可以看见嘛 </ view > |

block {#block}

|------------------------------------------------------------------------------------------------------------| |  < block wx:for = "{{number}}" wx:key = "*this" > {{item}} </ block > |

条件判断 {#条件判断}

事件绑定 {#事件绑定}

点击事件

|---------------------------------------------------------------------| |  < button bindtap = "dj" > 点击事件 </ button > |

文本框输入事件

|-------------------------------------------------------------------------------------------| |  < input bindinput = "sr" placeholder = "测试输入" /> |

文本框改变事件

|----------------------| | bindchange事件 |

取值传值 {#取值传值}

点击按钮时取值 {#点击按钮时取值}

取出文本框输入的值 {#取出文本框输入的值}

给data定义的属性赋值 {#给data定义的属性赋值}

获取data中的属性值 {#获取data中的属性值}

|--------------------------------------------------------------| | this . data . info //属性名是data中定义的名字 this . data .属性名 |

获取全局APP实例 {#获取全局APP实例}

app.js下定义的全局数据

获取全局值任意界面

|-----------------------------------------------------------------------| | const app= getApp (); console . log (app. globalData . url ); |

下拉刷新 {#下拉刷新}

app.json

|--------------------------------------------------------------------------------------------------------------------| | "enablePullDownRefresh" : true 开启 "backgroundTextStyle" : "dark" , //闪动 "backgroundColor" : "#efefef" 背景颜色 |

设置头部的颜色 {#设置头部的颜色}

|------------------------------------------------------| | "navigationBarBackgroundColor" : "#f2a0a1" , |

授权获取用户信息 {#授权获取用户信息}

点击事件获取

|-------------------------------------------------------------------------------------| | //getUserProfile是方法名 < button bindtap = "getUserProfile" > 授权用户 </ button > |

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | wx. getUserProfile ({ desc : '展示用户信息' , // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success : ( res ) => { console . log (res) this . setData ({ userInfo : res. userInfo }) } }) |

缓存的使用 {#缓存的使用}

设置缓存 {#设置缓存}

|----------------------------------------------------------------------------------------------------| | //设置缓存 wx.setStorageSync（key,value） wx. setStorageSync ( 'test' , app. globalData . url ); |

得到缓存 {#得到缓存}

|------------------------------------------------------------------------------------------------| | //得到缓存wx.getStorageSync（key） let hu=wx. getStorageSync ( 'test' ); console . log (hu); |

删除一个缓存 {#删除一个缓存}

|----------------------------------------------------------| | //删除一个缓存 wx. removeStorage ({ key : 'test' , }); |

删除全部缓存 {#删除全部缓存}

|---------------------------------------| | //删除多个缓存 wx. clearStorage (); |

JS中跳转到某个界面 {#JS中跳转到某个界面}

普通界面 {#普通界面}

|----------------------------------------------------------------------| | url里面写路径 wx. navigateTo ({ url : '/pages/detail/detail' , }) |

tabbar界面 {#tabbar界面}

|---------------------------------------------------------| | wx. switchTab ({ url : '/pages/user/index' , }) |

hover-class轻触 {#hover-class轻触}

|--------------------------------------------------------------------------------| | 轻触样式 < view class = "d1" hover-class = "vietap" > hello view </ view > |

text 复制 {#text-复制}

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| |  < view > 无法复制 < text user-select = "{{true}}" decode = "{{true}}" > 可以复制 </ text > </ view > |

image {#image}

常用 mode="widthFix"

swiper轮播图 {#swiper轮播图}

导航标签使用a标签 {#导航标签使用a标签}

跳转后从储存取数据需要在onshow生命周期中使用

传值 {#传值}

默认使用 {#默认使用}

|-------------------------------------------------------------------------------------------------------| |  < navigator url = "/pages/day4/day4" > 视频navgator </ navigator > |

重定向模式 {#重定向模式}

|---------------------------------------------------------------------------------------------------------------------------------| |  < navigator url = "/pages/day4/day4" open-type = "redirect" > redirect </ navigator > |

跳到TabBar页面 {#跳到TabBar页面}

|-------------------------------------------------------------------------------------------------------------------------| |  < navigator url = "/pages/video/video" open-type = "switchTab" > switchTab </ navigator > |

TabBar和普通都可以跳 {#TabBar和普通都可以跳}

|-------------------------------------------------------------------------------------------------------------------------------------------------| |  < navigator url = "/pages/day4/day4" open-type = "reLaunch" > reLaunch </ navigator > |

rich-text富文本标签 {#rich-text富文本标签}

|------------------------------------------------------------| | < rich-text nodes = "<h1>你好</h1>" > </ rich-text > |

icon标签 {#icon标签}

button {#button}

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | size可以跳转大小 < button type = "warn" bindtap = "grcli" > 绿色 </ button > < button type = "default" bindtap = "recli" > 红色 </ button > < button type = "primary" bindtap = "whcli" > 白色 </ button > |

加载框 {#加载框}

|-------------------------------------------------------------------------------| | //打开 wx. showLoading ({ title : 'title' , }) //关闭 wx. hideLoading (); |

消息提示框 {#消息提示框}

|-----------------------------------------------------------| | //打开不用手动关闭 wx. showToast ({ title : 'title' , }) |

模态窗口 {#模态窗口}

|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | wx. showModal ({ title : '提示' , content : '这是一个模态弹窗' , success (res) { if (res. confirm ) { console . log ( '用户点击确定' ) } else if (res. cancel ) { console . log ( '用户点击取消' ) } } }) |

导入样式 {#导入样式}

|----------------------------------------------| | @ import '../../style/common.wxss' ; |

使用less {#使用less}

vscode安装插件

编辑配置

|---------------------------------------------------| | "less.compile" : { "outExt" : ".wxss" } , |

写less保存后直接变成wxss

分享 {#分享}

|-------------------------------------------------------------------| |  < button open-type = "share" > 分享 </ button > |

打开客服 {#打开客服}

|-------------------------------------------------------------------------| |  < button open-type = "contact" > 打开客服 </ button > |

单选框 {#单选框}

多选框 {#多选框}

组件 {#组件}

创建组件 {#创建组件}

创建 components -->News-->新建 Component

js文件夹分析

|-------------------------------------------------------------------------------------------------------| | /** * 组件的属性列表 */ properties : { }, /** * 组件的初始数据 */ data :{ }, /** * 组件的方法列表 */ methods : { } |

注册组件 {#注册组件}

在需要使用这个组件的页面的json文件中配置组件

如我在day5中使用

|----------------------------------------------------------------------| | { "usingComponents" : { "Tabs" : "/components/Tabs/Tabs" } } |

使用组件 {#使用组件}

在改界面的wxml中使用 tabs是注册组件中的名字

|----------------------------| | < Tabs > </ Tabs > |

组件父传子传值 {#组件父传子传值}

界面 navlist是父组件的data里面的参数

day5.wxml

|--------------------------------------------------| | < Tabs nalis = "{{navlist}}" > </ Tabs > |

页面的js中data属性值

day5.js

组件中获取父组件传的值

Tabs.js

组件js中

|---------------------------------------------------------------------------------------------------------------------------| | //nalis是在界面中定义的传值属性 array是属性值的类型 properties : { //简写 nalis : Array , //详写 nalis :{ type : Array , value : '' } }, |

获取properties的值

|--------------------------------| | this . properties .属性名 |

组件子传父 {#组件子传父}

子组件

|---------------------------------------------------------------------------------------------| | //触发事件传值 idchange自定义的名字但是在父组件值使用需要加一个bind this . triggerEvent ( 'idchange' ,{id}); |

父组件

|----------------------------------------------------------------------------------------------------| | //bindidchange是子组件的触发事件 < Tabs nalis = "{{navlist}}" bindidchange = "idchange" > </ Tabs > |

组件插槽 {#组件插槽}

子组件

|-------------------------------------------------------------------------------------| | < view class = "tabs_context" >  < slot > </ slot > </ view > |

父组件组件标签中间放内容插槽就会有内容

生命周期 {#生命周期}

应用生命周期 {#应用生命周期}

app.js

|----------------------------------------------------------------------------------------------------------| | onLaunch (初始化) onShow (刚加载) onHide (放到后台或者离开该界面) onError (出现错误的时候执行错误级) onPageNotFound (页面没有找到) |

页面的生命周期 {#页面的生命周期}

xxx.js

屏幕旋转 {#屏幕旋转}

单个界面旋转界面.json

|------------------------------------| | "pageOrientation" : "auto" |

整个程序旋转 app.json

|------------------------------------| | "pageOrientation" : "auto" |

发送请求 {#发送请求}

微信提供的 {#微信提供的}

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | wx. request ({ url : 'https://service-qze5ckvg-1301165591.gz.apigw.tencentcs.com /release/test' , //成功 success ( res ){ console . log (res. data ); }, //错误 fail ( err ){ console . log (err); } }) |

promise封装请求 {#promise封装请求}

util.js

使用中导入

|--------------------------------------------------| | import {request} from '../../utils/util' |

使用

|-----------------------------------------------------------------------------------------------------------------------------------| | request ({ url : 'https://autumnfish.cn/api/joke/list' , data :{ num : 10 }}). then ( ( res )=> { console . log (res); }) |

await使用

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | async asyqq ( ) { //点击的方法方法需要加async let res = await request ({ url : 'https://autumnfish.cn/api/joke/list' , data : { num : 10 } }); console . log (res); } |

请求时显示加载图标封装请求 {#请求时显示加载图标封装请求}

微信登入 {#微信登入}

微信登入官方提供可以通过获取用户权限和登入的code去后台获取token

|--------------------------------------------------------------------------| | wx. login ({ success ( res ){ console . log (res); //返回code } }) |

图片预览 {#图片预览}

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | //获取所有轮播图 console . log ( this . stgoods . pics ); let imgarr= this . stgoods . pics . map ( ( v )=> v. pics_big_url ); wx. previewImage ({ //当前预览的图 current :e. currentTarget . dataset . pic , urls :imgarr }) |

返回上一个界面 {#返回上一个界面}

|-------------------------------------------------------| | // 返回上一个页面 wx. navigateBack ({ delta : 1 , }) |

上传图片到云存储 {#上传图片到云存储}

下载文件 {#下载文件}

https://github.com/tencentyun/cos-wx-sdk-v5/blob/master/demo/lib/cos-wx-sdk-v5.js

引入文件（下载的文件放在util文件夹下面在util.js下引入文件）

|---------------------------------------------------| | var COS = require ( 'cos-wx-sdk-v5.js' ); |

封装方法 {#封装方法}

保存秘钥 {#保存秘钥}

|------------------------------------------------------------------------------------------------------------------------| | // SECRETID 和 SECRETKEY请登录 var cos = new COS ({ SecretId : 'xxxxxxxxxxxxxxxx' , SecretKey : 'xxxxxxxxxx' , }); |

上传方法 {#上传方法}

删除文件 {#删除文件}

使用 {#使用}

图片示例

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | //选择图片+ upimg ( ){ //保存this let that = this wx. chooseImage ({ success ( res ){ that. setData ({ //放入临时的地址 imgarr :[...that. data . imgarr ,...res. tempFilePaths ] }) } }) }, //点击图片预览 prvimg ( e ){ /*console.log(e.detail.index);*/ wx. previewImage ({ //当前预览的图 current : this . data . imgarr [e. detail . index ], urls : this . data . imgarr }) }, //多行文本输入 handtext ( e ){ //设置输入的内容 this . setData ({ feebtext :e. detail . value }); /*console.log(this.data.feebtext);*/ }, //点击提交按钮 async feebsubmit ( ) { //获取原来的图片数组 let chooseImage = this . data . imgarr ; //文本内容 let feebtext = this . data . feebtext ; //判断文本域是不是为空 if (!feebtext. trim ()) { wx. showToast ({ title : '反馈的内容不能为空！' , icon : 'none' , mask : true }); return ; }; wx. showLoading ({ title : '正在上传...' , mask : true }); //有图片 if (chooseImage. length != 0 ) { //循环遍历 for ( const item of chooseImage) { //下标 const i = chooseImage. indexOf (item); //截取到文件的名字 let filename = item. substr (item. lastIndexOf ( '/' ) + 1 ); //上传到云存储 let res = await cosupimg (filename, item); console . log (res); //判断状态 if (i===chooseImage. length - 1 && res. statusCode === 200 ){ wx. hideLoading (); wx. showToast ({ title : '提交成功' , icon : 'success' , mask : true }) //重新赋值 this . setData ({ imgarr :[], feebtext : '' }); //返回上一个界面 setTimeout ( ()=> { wx. navigateBack ({ delta : 1 }); }, 2000 ); //返回上一个界面 setTimeout ( ()=> { wx. navigateBack ({ delta : 1 , mask : true }); }, 1100 ); } } } else { //只提交文字 wx. showToast ({ title : '提交成功！' , icon : 'success' , mask : true }); //返回上一个界面 wx. navigateBack ({ delta : 1 }) } }, |

轮播图的高度计算 {#轮播图的高度计算}

|-------------------------------------------------------| | 高度：750rpx * 图片高度/图片宽度图片宽度为100% mode:widthfix |

iphone底部安全区适配 {#iphone底部安全区适配}

调用wx.getSystemInfo，获得手机型号（res.model），并存储为全局变量

在所需页面的js文件的onLoad函数内从全局变量里面拿出来第一步存储的手机型号值，这里设置为
isIphoneX：

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | const app = getApp (); Page ({ onLoad : function ( options ){ // let modelmes = wx.getStorageSync('modelmes'); let isIphoneX = app. globalData . isIphoneX ; this . setData ({ isIphoneX : isIphoneX }) } }) |

给页面添加一个最底部的盒子，或者给整个页面套一个最外层的盒子(底部间距为68rpx)

|-------------------------------------------------------------------------------------------------------------------| | < view class = "detail" style = "height: {{isIphoneX ? 'calc(100% - 68rpx)' : '100%'}}" > ...内容 </ view > |

此处需要注意
App.wxss 的Page高度需要设置，同时detail页面的也需要设置溢出滚动，这样才能保证页面正常滚动

|-------------------------------------------------------------------------------------------------| | /* App.wxss */ Page{ height : 100% ; } /* detail.wxss */ .detail { overflow : scroll; } |

小程序刷新当前页 {#小程序刷新当前页}

网上很多刷新当前页的做法是

|---------------------------------------------------| | this . onLoad (); // 或是 this . onShow (); |

如果只是为了清除数据刷新页面，恢复初始值的话，可以将data中的数据抽离，然后重新setData即可

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | let obj = { username : "xxx" } Page ({ data : JSON . parse ( JSON . stringify (obj)), // 做一次深拷贝，让data与obj脱钩 fn ( ){ this . setData (obj); // 重新赋值data，相当于刷新了页面，因为数据还原了 } }) |

目录认识 {#目录认识}