引入第三方包
微信小程序支持 echarts, 微信小程序加载 echarts 引入 echarts
echarts 体积过大的时候, 采用压缩, 不要下最新的, 下 5.0 就行了
echarts 刷新功能, 通过调用 setOptions 方法
引用 vant weapp
npm init -y 创建package.json
npm i -s 安装vant
点击详情, 默认使用npm模块
点击工具, 构建npm, 每次安装新的npm包的时候都要构建一下
在.json文件中的, userComponents中注入
- 修改 vant 的样式
<van-search backgroun="#aaa" />
<!-- 覆盖样式 -->
去页面上面, 选中类名, 然后在wxss里面覆盖掉, 使用 !important
组件
组件创建
去 components 中创建一个组件, 会自动生成模板, 组件生命周期和页面的生命周期不相同
发送事件
methods: {
hadnleRightClick() {
this.triggerEvent("click")
}
}
bind:click="handleClick"
组件监听事件
this.triggerEvent("父组件自定义事件的名称"， 要传递的参数)
<list-item bind:change="handleChange" ></list-item>
点击事件 bindtap
传值
<child-com count="{countData}">
接受
properties: {
count: {
type: "",
value: ""
}
}
小程序属性想要获取绑定后的值
通过 data-jidjj="" 的形式来获取
const idx = event.target.dataset.idx
指令用法
循环
wx:for="{{arr}}" key="*this"
默认有item, index, 对象的时候有差异
显示
wx:if = {{true}}
生命周期
app 生命周期
app.js
- onLaunch 第一次启动的时候触发
- onShow 页面被用户看到 -- 对数据或页面进行重置
- onHide 页面隐藏 -- 暂停或者清除定时器
- onError 应用代码发生报错触发 -- 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求将错误的信息发送后台去
- onPageNotFound 页面找不到 -- 应用第一次启动的时候，如果找不到第一个入口页面才会触发， 只有第一次进不去才会触发
页面生命周期
- onLoad
- onShow
刷新
上拉刷新
onReachBottom() {
// 如果没有更多数据的时候, 应该return掉
}
一个是 page 自带的下拉触底钩子事件 onReachBottom 能做的只是下拉到底部的时候通知你触底了，一个是 scroll-view 标签自带事件
下拉刷新
json 中配置
enablePullDownRefresh: true
onPullDownRefresh() {
// 加载新数据, 把一些状态还原
// 停止下拉刷新
wx.stopPullDownRefresh()
}
顶部 navigation 自定义
需要去.json 里面开启自定义
"navigationStyle": "custom"
这样就没有默认的头部, 需要自己写
图片上传
uploadPhoto() {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
upload(that, tempFilePaths);
},
});
},
});
function upload(page, path) {
wx.showToast({
icon: "loading",
title: "正在上传",
}),
wx.uploadFile({
url: constant.SERVER_URL + "/FileUploadServlet",
filePath: path[0],
name: "file",
header: {
"Content-Type": "multipart/form-data",
},
formData: {
//和服务器约定的token, 一般也可以放在header中
session_token: wx.getStorageSync("session_token"),
},
success: function(res) {
console.log(res);
if (res.statusCode != 200) {
wx.showModal({
title: "提示",
content: "上传失败",
showCancel: false,
});
return;
}
var data = res.data;
page.setData({
//上传成功修改显示头像
src: path[0],
});
},
fail: function(e) {
console.log(e);
wx.showModal({
title: "提示",
content: "上传失败",
showCancel: false,
});
},
complete: function() {
wx.hideToast(); //隐藏Toast
},
});
}
跳转
wx.navigateTo({
url: "/djfid/df?id=344"
})
// 获取跳转过来的id
onLoad(params) {
console.log(params.id)
}
// tab切换跳转
wx.switchTab({
url: '/page/page'
})
共享数据
app.js 中共享, 但是数据不是响应式的
- mitt 事件总线库, 只会发和接数据, 不能存储共享数据
小程序解决方案
- 放到 app.js 中的 global, 数据不是响应式的
状态管理工具
文档 https://gitee.com/ElenaK/hy-event-store
安装 npm i hy-event-store
TJ
import { HYEventStore } from 'hy-event-store'
const eventStore = new HYEventStore({
state: {
upRanking: {},
},
actions: {
getRankingsAction(ctx) {},
}
})
export default eventStore
// 使用方法
eventStore.setState("playIndex", index) // 设置state中的值
eventStore.onState("hotRanking", this.hotRankingHanlder) // 监听state中的值, 并且触发某些方法
eventStore.dispatch("getRankingsAction") // 触发action
eventStore.offState("hotRanking", this.hotRankingHanlder) // 卸掉监听
setData
setData 是同步的, 但是对页面进行渲染的过程是异步的
react 在大部分情况下, setState 是异步的, 为了保证 data 里面的数据始终和页面以及组件中的数据保持一致
存储数据
1. 通过本地存储
const logs = wx.getStorageSync('logs')
wx.setStorageSync('logs', logs)
2. 通过app.js中的 globalData 存储
globalData: {}
微信支付
-
创建订单
-
先获取用户登录成功后的 token 值 -- 调用后端接口
前四个参数通过 button 的 open-type 中获取， 最后一个通过 wx.login 获取，跳转页面，点击按钮获取想要信息
-
调用获取用户信息按钮， 拿到前四个参数
-
调用登录接口获取信息
-
封装优化回调
优化后的代码
完整步骤
调用后台接口拿到订单编号
-
-
预支付
接口 -
返回数据
-
调用微信内支付，上面的数据用于这一步的参数
发起微信支付
返回支付成功或者失败查询订单
调用接口，看看后台是否真的成功了，跳转到订单页面
其余需要注意部分
获取系统参数
wx.getSystemInfoSync();
获取某个 DOM
const query = wx.createSelectQuery();
query.select('.swiper-image').boundingClientReact();
插槽实现默认插入值
插槽不能默认值
实现方案: 通过一个伪类选择器
<view class="slot">
<slot></slot>
</view>
<view class="default">
<text>rightText3</text>
</view>
.header .slot:empty + .default {
display: block;
// 当里面为空的时候进行一些处理
}
.header .default {
display: none;
}
引入 script 脚本
we-script
watch 使用
页面需要单独注入 https://www.jianshu.com/p/34c2403a7a1c
组件中集成得有 https://blog.csdn.net/m0_63466615/article/details/123344136
// 只有组件里面才能监听
observers: {
'popShow': function(val) {}
},
封装 base-echarts
类似 filter 解决方案
通过 wxs
不支持 es6 语法
<!-- wxs -->
<!-- 比如保留两位小数 -->
<!-- utils/format.wxs -->
function parseNum(val) {
var value = val+""
return value.toFix(2)
}
module.exports = {
parseNum: parseNum
}
使用
<wxs src="../../utils/format.wxs" module="format"></wxs>
<view>
{{format.parseNum('343.34343')}}
</view>
微信复制
/**
* 复制
*/
copyText(e) {
wx.setClipboardData({
data: e.currentTarget.dataset.text,
success(res) {
console.log("success -> res", res)
}
})
},
返回上一页面并传参
// 直接调用它返回即可
_returnToPreviousPage() {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
if (prevPage) {
prevPage.setData({
isRresh: true
})
}
},
事件穿透, 事件冒泡将 bindtap 改为 catchtap
关于微信小程序报错 微信小程序 Cannot read property 'mark' of undefined 由于没有打开扩展不支持 async
注意在 less 中如果使用 calc 的时候， 编译会出问题，所以需要原样输出
不能用 background
所有与图片相关的都用 image
image 用几种用法:
- aspectFill
- aspectFit
- scaleToFill
- widthFix
图片预览有专门的方法
wx.previewImage
导入样式
- 只能用 @import
- 只能使用相对路径
长按文字复制
只能通过 text 标签, 并且 user-select 属性设置为 true
swiper 会有一个默认高度, 不会由内容自动撑开
本文由博客一文多发平台 OpenWrite 发布！
