共计 4710 个字符，预计需要花费 12 分钟才能阅读完成。
引入第三方包
微信小程序反对 echarts, 微信小程序加载 echarts 引入 echarts
微信小程序引入
github 地址
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-e…
装置 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/34c…
组件中集成得有 https://blog.csdn.net/m0_6346…
// 只有组件外面能力监听
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 公布！
正文完