一次微信小程序开发的破事水

这个项目是写给一个比赛的。采用的是原生微信小程序开发，使用了 vant。由于项目涉及到一些后端，感觉云开发可能方便一点，姑且也试试水好了

明明在 wxml 里加了内容，为什么没有显示？

最后在同文件夹下的 js 里加了个 Page({})就解决了……

想不借助 canvs，定位图片里的某个区域

因为是打算做点击图片特定位置，做出不同的逻辑处理，需要对图片某些区域进行定位，但是不借助 canvas 如何实现大致的定位呢首先引入 image，并且用 wx:for 循环出几个 absolute 的 view 模拟按钮，且在最外层包裹一层 view 作为父盒子，准备工作完成后开始设置按钮的定位

css
[id^='button-'] {
  position: absolute;
  background-color: transparent;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
}
#button-first {
  margin-left: 9.4rem;
  margin-top: -127%;
}

也许有朋友注意到我没有采用 left 和 top 的定位，而是采用了 margin-top 和 margin-left 进行定位，这是因为最近在看书的时候了解到，如果 absolute 的元素没有设置 left 等属性，该绝对定位元素将具有相对特性，不需要父元素设置 relative，比设置 left 的那种定位起来方便一点，故沿用该方法水平方向的定位这边，因为之前做杭助官网的时候，有个组件需要定位 hduhelp 小字，水平方向上用了百分比 vw 方案都不太行，最后用 rem 意外的解决了，这次也尝试用了 rem 限定 margin-left，用 ipad 等各种小程序内置模拟设备都没有偏移，还是挺健壮的竖直方向这边，我使用的是百分比，肉眼看也没什么偏移由于之前碰到过类似情况但没有找到合适的解决方案，这次记录在这

wxml 中如何传参到 methods 中

vue 写惯了，反手在 wxml 写了这行

html
<block wx:for="{{btn_list}}" wx:key="index">
  <view id="{{item}}" bindtap="enter({{index}})"></view>
</block>

结果报错：

bash
VM203 WAService.js:2 Component "pages/home/home" does not have a method "enter(1)" to handle event "tap".

思索片刻骤然想起来，小程序不能直接往方法里传参，需要在前缀为 data-的自定义属性传入参数所以应该像下面这样写

html
<block wx:for="{{btn_list}}" wx:key="index">
  <!-- wx-key这里就不需要{{}}了 -->
  <view id="{{item}}" bindtap="enter" data-index="{{index}}"></view>
</block>

javascript
Page({
  data: {
    btn_list: ['button-first', 'button-second', 'button-third'],
  },
  enter(e) {
    const { index } = e.currentTarget.dataset
    console.log(index) // 果然正确打印出了index
  },
})

npm WARN fire_fe@1.0.0 No repository field.

第一次碰到这个报错。猜测可能是因为在构建 npm 包的时候顺序出了差错，官方声明需要先在 app.json 中配置好，再构建 npm 包，但我当时构建完 npm 包发现有问题，配置好 app.json 之后还是有问题。之后在某页面的 json 中引入某个组件时，会显示路径不正确，找不到对应文件。我按照路径找了一下确实路径中间少了个 dist 的文件夹，但是手动配置好后还是报一样的错。

尝试 uninstall 以及 install vant-weapp，但是结果都是 npm WARN fire_fe@1.0.0 No repository field.

尝试删除 miniprogram_npm 和 node_modules 里的@vant 文件夹，再次尝试 install vant-weapp，依然报错 npm WARN fire_fe@1.0.0 No repository field. 并且点击构建 npm 包之后@vant 文件夹又回来了……

到这一步的时候稍微有些乱，网上找了一下相关资料，大概有了个思路

和普通小程序不一样，云开发因为引入了其他文件夹，所以 npm install vant 的根目录不一样，需要先切换到子目录 miniprogram 的终端下，npm init 生成 package.json 之后再执行 npm i @vant/weapp -S --production

之后点击右上角的详情，勾选“使用 npm 模块”，点击工具->构建 npm，构建好之后就可以在页面的 json 文件中引入组件啦，卡酷一得修

可惜的是这还是没解决我的问题，构建 npm 的时候报“message：发生错误 Error: D:\github\fire_fe\package.json 对应的 node_modules 不存在，请在 D:\github\fire_fe 执行 npm install”

debugde 了一会儿，网上找到个解决方案，说把所有 package-lock.json,package.json,node_modules,miniprogram_npm 都删干净，npm init -y 也下好 vant 之后构建 npm 就好了，于是这次我在 miniprogram 中操作了一番之后，一构建 npm 说外部的 package.json 没配置，这时候我就隐隐感觉会不会是我需要设置入口的 package.json，接着我在外部 Init package 之后又说没找到 node_modules，于是我感觉入手点可能在入口文件上

建立组合索引

用 wx 内置的查询语句的时候控制台建议使用组合索引，看了一眼官方文档似乎没写索引怎么建，不过找起来也不难，记录一下。入口是云开发->数据库->索引管理->添加索引，分析一下候选码，填上去就完事了

globalData 的值在其他页面获取不到

调试过，在 app.js 中打印 globalData 的值同时在其他页面 console.log 了 getApp().globalData 的值，然后打印顺序是 app.js 在先，排除了其他页面获取 globalData 时 app.js 中还没加载好的可能，在其他页面里获取 app 实例，globalData 依然为空，由于时间有点紧张，只好先看看有没有其他方法

尝试用 wx 小程序的 storage 存储全局变量

虽然听说微信小程序的缓存很迷，不过既然 globalData 莫名其妙无效了，就姑且用着看看记一下语法格式：（来源<a href="https://zhuanlan.zhihu.com/p/285088866#:~:text=%E5%90%8C%E4%B8%80%E4%B8%AA%E5%BE%AE%E4%BF%A1%E7%94%A8%E6%88%B7%EF%BC%8C%E5%90%8C%E4%B8%80%E4%B8%AA%E5%B0%8F%E7%A8%8B%E5%BA%8F%20storage%E4%B8%8A%E9%99%90%E4%B8%BA%2010MB%2C%E4%B8%80%E8%88%AC%E5%8F%AF%E4%BB%A5%E4%BD%9C%E4%B8%BA%E7%BC%93%E5%AD%98%E4%B8%B4%E6%97%B6%E4%B8%80%E4%BA%9B%E5%B0%8F%E7%9A%84%E6%95%B0%E6%8D%AE%2C%E6%AF%94%E5%A6%82%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E4%BF%A1%E6%81%AF%E4%B9%8B%E7%B1%BB%E7%9A%84%20storage,%E4%BB%A5%E7%94%A8%E6%88%B7%E7%BB%B4%E5%BA%A6%E9%9A%94%E7%A6%BB%EF%BC%8C%E5%90%8C%E4%B8%80%E5%8F%B0%E8%AE%BE%E5%A4%87%E4%B8%8A%EF%BC%8CA%20%E7%94%A8%E6%88%B7%E6%97%A0%E6%B3%95%E8%AF%BB%E5%8F%96%E5%88%B0%20B%20%E7%94%A8%E6%88%B7%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%9B%E4%B8%8D%E5%90%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B9%8B%E9%97%B4%E4%B9%9F%E6%97%A0%E6%B3%95%E4%BA%92%E7%9B%B8%E8%AF%BB%E5%86%99%E6%95%B0%E6%8D%AE%20%E5%AD%98%E5%82%A8%E5%A4%A7%E5%B0%8F%E9%99%90%E5%88%B6">小程序-页面与页面之间如何进行传递数据</a> 设置 wx.setStorageSync('key', 'value'); 读取 const value = wx.getStorageSync('key'); 清空缓存 wx.clearStorage(); 删除指定项 wx.removeStorageSync('key');

如何在 storage 中存储数组调试的时候发现一个问题

javascript
wx.setStorageSync('areaName', ['生活区', '教学区'])
const areaName = wx.getStorageSync('areaName')
console.log(areaName[0]) // 生
console.log(typeof areaName) // string

愣了一下想起来 localstorage 也是这样的……太久没用了都有点忘了要 Json.parse