关于小程序:小程序

42次阅读

共计 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 中共享, 然而数据不是响应式的

  1. mitt 事件总线库, 只会发和接数据, 不能存储共享数据

小程序解决方案

  1. 放到 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: {}

微信领取

  1. 创立订单

    • 先获取用户登录胜利后的 token 值 — 调用后端接口
      前四个参数通过 button 的 open-type 中获取，最初一个通过 wx.login 获取，跳转页面，点击按钮获取想要信息

    1. 调用获取用户信息按钮，拿到前四个参数

    2. 调用登录接口获取信息

    3. 封装优化回调

      优化后的代码

      残缺步骤

      调用后盾接口拿到订单编号

  2. 预领取
    接口

  3. 返回数据

  4. 调用微信内领取，下面的数据用于这一步的参数

  5. 发动微信领取
    返回领取胜利或者失败
  6. 查问订单
    调用接口，看看后盾是否真的胜利了，跳转到订单页面

其余须要留神局部

获取零碎参数

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

导入款式

  1. 只能用 @import
  2. 只能应用相对路径

长按文字复制

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

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

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

正文完
小程序
发表至： 小程序
2022-06-13
 0
玩转AR图形识别小程序
如何使用top查看程序的内存占用情况
关于小程序:题库小程序之技术点总结
关于小程序:国产工具好强大一个可以允许小程序运行在任意APP的容器技术