关于小程序:小程序

微信小程序引入

github 地址

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

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

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.js

onLaunch 第一次启动的时候触发
onShow 页面被用户看到 — 对数据或页面进行重置
onHide 页面暗藏 — 暂停或者革除定时器
onError 利用代码产生报错触发 — 在利用产生代码报错的时候，收集用户的错误信息，通过异步申请将谬误的信息发送后盾去
onPageNotFound 页面找不到 — 利用第一次启动的时候，如果找不到第一个入口页面才会触发，只有第一次进不去才会触发

onLoad
onShow

onReachBottom() {// 如果没有更多数据的时候, 应该 return 掉}

一个是 page 自带的下拉触底钩子事件 onReachBottom 能做的只是下拉到底部的时候告诉你触底了，一个是 scroll-view 标签自带事件

json 中配置

enablePullDownRefresh: true

onPullDownRefresh() {
    // 加载新数据, 把一些状态还原

    // 进行下拉刷新
    wx.stopPullDownRefresh()}

须要去.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 是同步的, 然而对页面进行渲染的过程是异步的
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();

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;}

we-script

页面须要独自注入 https://www.jianshu.com/p/34c…

组件中集成得有 https://blog.csdn.net/m0_6346…

// 只有组件外面能力监听
observers: {'popShow': function(val) {}},

封装 base-echarts

通过 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})
    }
},

所有与图片相干的都用 image
image 用几种用法:

aspectFill
aspectFit
scaleToFill
widthFix

wx.previewImage

只能用 @import
只能应用相对路径

只能通过 text 标签, 并且 user-select 属性设置为 true

本文由博客一文多发平台 OpenWrite 公布！

引入第三方包

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

援用 vant weapp

组件

组件创立

发送事件

组件监听事件

传值

小程序属性想要获取绑定后的值

指令用法

循环

显示

生命周期

app 生命周期

页面生命周期

刷新

上拉刷新

下拉刷新

顶部 navigation 自定义

图片上传

跳转

共享数据

状态管理工具

setData

存储数据

微信领取

其余须要留神局部

获取零碎参数

获取某个 DOM

插槽实现默认插入值

引入 script 脚本

watch 应用

相似 filter 解决方案

微信复制

返回上一页面并传参

事件穿透, 事件冒泡将 bindtap 改为 catchtap

对于微信小程序报错 微信小程序 Cannot read property ‘mark’ of undefined 因为没有关上扩大不反对 async

留神在 less 中如果应用 calc 的时候，编译会出问题，所以须要原样输入

不能用 background

图片预览有专门的办法

导入款式

长按文字复制

swiper 会有一个默认高度, 不会由内容主动撑开

对于微信小程序报错微信小程序 Cannot read property ‘mark’ of undefined 因为没有关上扩大不反对 async