周末闲着没事，想做一个上网的小程序，想着等会儿再修改，结果没时间，最近公司又要一个项目，大家都在开发产品，不会用代码生成器，对代码质量也有要求，就干脆周末空出一天时间。

小程序的备案和审核也是个头疼的问题，不过我不太在意能不能上线，只想巩固​​一下自己的技术，平时都是做服务端开发的，很少有时间做前端的工作，先看看效果吧！

界面效果

我没有设计UI，只是找了一个样式然后做了出来，用的是UI框架。

官网地址：

深入学习前端，需要专业的前端。整体的配色、动画效果、字体等都需要艺术细胞，但如果要用基础的，看文档直接引用自己需要哪个组件就可以了。不过还是需要前端有一定的基础，如果学过 Vue 这样的前端框架，开发小程序会容易得多。

我并不是从零开始介绍微信小程序，只是记录自己遇到的坑，如果需要从零开始，可以去微信小程序官网看文档：

小程序开发部分内容已经改了，但是文档还没跟上，如果按照说明操作后遇到错误，建议多百度或者谷歌找找，不要光干活。

问题 1

使用npm安装时总是无法正确显示

message： NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList`

这个问题需要修改....json文件，npm设置为手动，添加"":true,"":[]配置（这个配置信息在）

{ "description": "项目配置文件", "miniprogramRoot": "miniprogram/", "compileType": "miniprogram", "setting": { "useCompilerPlugins": [ "typescript" ], "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "coverView": false, "postcss": false, "minified": false, "enhance": true, "showShadowRootInWxmlPanel": false, "ignoreUploadUnusedFiles": true, "compileHotReLoad": false, "skylineRenderEnable": false, "es6": true, "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] }, "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "condition": {}, "srcMiniprogramRoot": "miniprogram/", "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 }, "libVersion": "trial", "packOptions": { "ignore": [], "include": [] }, }

使用 npm i---S-- 安装包，然后在工具下找到“ npm”。 完成后会在目录下生成一个文件夹，如果目录不对，组件不会生效。我遇到的问题是它在目录外面，下面嵌套了。也清除过缓存，重启过 IDE，还是不行。关掉电脑，玩个游戏，再回来就没事了。有时候太固执也是一个问题。

问题2

设置xt是没用的，新版本需要自己写一个组件，幸好小程序模板里有个bar组件，直接拿来用就行。

问题 3

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

使用小程底部按钮时，wx.跳转到非页面，但是我想跳转到页面，所以报错。解决办法是使用wx.进行跳转。

1. 韋克斯。

使用场景：当需要从一个页面跳转到另一个页面，并希望保留上一页的历史记录时使用。例如，当用户在商品列表页选择商品后，跳转到商品详情页。通过这种跳转方式，用户可以在查看详情后使用返回按钮返回到商品列表页。

2. wx。

使用场景：当需要从一个页面跳转到另一个页面，且不需要保留上一个页面的历史记录时使用。例如，当用户完成登录操作后跳转到首页。此跳转方式确保登录页面不再保留在历史记录中，用户无法返回登录页面。

3. wx。

使用场景：当需要跳转到设置的页面时使用。例如微信小程序底部有一个导航栏（），当用户在非页面（如商品详情页）点击按钮时，会跳转到首页或者购物车页。这种跳转方式可以方便用户快速切换不同的模块。

4. wx。

使用场景：当需要重置整个页面堆栈并打开某个页面时使用此功能。例如，用户注销后，清除所有页面历史记录并将用户重定向到登录页面。这种重定向方式可确保用户无法返回注销前的页面，从而确保应用程序的安全性和逻辑完整性。

5. wx。

使用场景：当需要从当前页面返回上一页时使用此功能。例如，当用户完成一个多步骤的表单后，想返回到表单首页。通过这种跳转方式，用户可以灵活地返回到当前页面之前的任意页面，操作更加便捷。

最后，尽量不要复制微信小程序的页面文件，因为都是记录在app.json里的，如果漏掉了就是bug。每个tab项也要先在app.json里定义好，不知道这样做的目的是什么，不太喜欢这种关联，如果不小心漏掉了就是bug。先记录这些，接下来的一段时间会专心于公司项目。