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

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

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

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

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

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

[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 写了这行

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

结果报错：

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

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

<block wx:for="{{btn_list}}" wx:key="index">
  <!-- wx-key这里就不需要{{}}了 -->
  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 莫名其妙无效了，就姑且用着看看
记一下语法格式：（来源小程序-页面与页面之间如何进行传递数据
设置 wx.setStorageSync(‘key’, ‘value’);
读取 const value = wx.getStorageSync(‘key’);
清空缓存 wx.clearStorage();
删除指定项 wx.removeStorageSync(‘key’);

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

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

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

Wisteria's blog