关于小程序:小程序

引入第三方包

微信小程序反对 echarts, 微信小程序加载 echarts 引入 echarts

微信小程序引入

github 地址

echarts 体积过大的时候, 采纳压缩, 不要下最新的, 下 5.0 就行了

echarts 刷新性能, 通过调用 setOptions 办法

援用 vant weapp

npm init -y 创立package.jsonnpm 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: trueonPullDownRefresh() {    // 加载新数据, 把一些状态还原    // 进行下拉刷新    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"})// 获取跳转过来的idonLoad(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") // 触发actioneventStore.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 获取，跳转页面，点击按钮获取想要信息
1. 调用获取用户信息按钮，拿到前四个参数
2. 调用登录接口获取信息
3. 封装优化回调
  优化后的代码
  残缺步骤
  调用后盾接口拿到订单编号
预领取
接口
返回数据
调用微信内领取，下面的数据用于这一步的参数
发动微信领取
返回领取胜利或者失败
查问订单
调用接口，看看后盾是否真的胜利了，跳转到订单页面

其余须要留神局部

获取零碎参数

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 公布！