【随手记】微信小程序入坑指南
前言
本篇文章记录了学习微信小程序时遇到的一些问题和知识点，学习材料是coderwhy老师的视频。
本地开发环境设定与修改
微信开发者工具将个人对工具做的所有配置都写入到了project.config.json文件中，当更换电脑或重装时，只需要载入同一个项目的代码包，开发者工具就自动会帮开发者恢复到当时开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
需要注意project.config.json 和 project.private.config.json两个文件的区别，private是个人的配置且优先级更高，以下来源于微信开发文档：
- 项目根目录中的
project.config.json和project.private.config.json文件可以对项目进行配置， project.private.config.json中的相同设置优先级高于project.config.json- 可以在
project.config.json文件中配置公共的配置，在project.private.config.json配置个人的配置，可以将project.private.config.json写到.gitignore避免版本管理的冲突。 project.private.config.json中有的字段，开发者工具内的设置修改会优先覆盖project.private.config.json的内容。如在project.private.config.json有appid字段，那么在 详情 - 基本信息 中修改了 appid，会写到project.private.config.json中，不会覆盖掉project.config.json的appid字段的内容- 开发阶段相关的设置修改优先同步到
project.private.config.json中，但与最终编译产物有关的设置无法在project.private.config.json中生效，界面上的改动也不会同步到project.private.config.json文件中。详见 表格是否允许私有设置。
当需要更换版本、修改本地调试的设置时，打开开发工具右上角的详情，修改本地设置即可。
页面下拉刷新与上拉加载
针对单个页面（page）实现下拉刷新和上拉加载，需要用到onPullDownRefresh和onReachBottom两个函数，对需要实现的页面配置page.js，样例代码如下：
// pages/profile/profile.js
Page({
data: {
avatarURL: "",
listCount: 30
},
// 这里针对的是展示数据较多的页面，初始刷新，下拉onPullDownRefresh返回30条数据
// 当用户浏览至底部后，触发onReachBottom返回额外的30条数据
// 监听下拉刷新
onPullDownRefresh() {
console.log("用户进行下拉刷新~");
// 模拟网络请求: 定时器
setTimeout(() => {
this.setData({ listCount: 30 })
// API: 停止下拉刷新
wx.stopPullDownRefresh({
success: (res) => {
console.log("成功停止了下拉刷新", res);
},
fail: (err) => {
console.log("失败停止了下拉刷新", err);
}
})
}, 1000)
},
// 监听页面滚动到底部
onReachBottom() {
console.log("onReachBottom");
this.setData({
listCount: this.data.listCount + 30
})
}
})<view class="list">
<block wx:for="{{listCount}}" wx:key="*this">
<view>列表数据:{{ item }}</view>
</block>
</view>场景值用来描述用户进入小程序的路径。通俗地说，就是你从哪找到这个小程序的，小程序可以获取到这个值，针对不同的业务场景（场景值），进行相应的处理，以实现更为细致的业务逻辑。相关操作在项目根目录下的app.js中进行，使用onLaunch、onShow函数或者wx.getLaunchOptionSync获取。
个人感觉就像是两个不认识的人——用户A、小程序C，他们都认识小程序B，有一天用户A收到小程序B的推荐认识了小程序C，小程序C为了和用户A相处的更加自然，从小程序B处获取用户A的相关信息。
全局共享数据
通过配置根目录的app.js设置全局的数据globalData，在页面中使用getApp()获取
数据不是响应式，共享的数据通常是一些固定的数据
// pages/order/order.js
Page({
data: {
userInfo: {}
},
onLoad() {
// 获取共享的数据: App实例中数据
// 1.获取app实例对象
const app = getApp()
// 2.从app实例对象获取数据
const token = app.globalData.token
const userInfo = app.globalData.userInfo
console.log(token, userInfo);
// 3.拿到token目的发送网络请求
// 4.将数据展示到界面上面
// this.data.userInfo = userInfo
this.setData({ userInfo })
console.log(this.data.userInfo);
}
})登录基本逻辑（app.js）
App框架接口示例代码，由于登录过程比较复杂，这里只做简单说明。
App({
globalData: {
token: "",
userInfo: {}
},
onLaunch (options) {
// Do something initial when launch.
// 0.从本地获取token/userInfo
const token = wx.getStorageSync("token")
const userInfo = wx.getStorageSync("userInfo")
// 1.进行登录操作(判断逻辑)
if (!token || !userInfo) {
// 将登录成功的数据, 保存到storage
console.log("登录操作");
wx.setStorageSync("token", "kobetoken")
wx.setStorageSync("userInfo", { nickname: "kobe", level: 100 })
}
// 2.将获取到数据保存到globalData中
this.globalData.token = token
this.globalData.userInfo = userInfo
// 3.发送网络请求, 优先请求一些必要的数据
// wx.request({ url: 'url'})
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
}
})按钮跳转处理逻辑
在首页使用wx:for="{{pages}}"的方式将各个子页面的跳转以按钮的形式呈现出来，方便查看各知识点。
data-xx的使用，后续的传参必须是存在的、可使用的值，xx是个人自定义的名字。
<!-- home首页 -->
<view class="pages">
<block wx:for="{{pages}}" wx:key="name">
<!-- item是index.js中已定义的值，data-item是个人自定义的名字，data-name、data-id都可以 -->
<button
type="primary"
bindtap="onBtnClick"
data-item="{{item}}"
>
{{ item.name }}
</button>
</block>
</view>// index.js
Page({
data: {
// path中的 02 是一条错误示范
pages: [
{ name: "01_初体验", path: "/pages/01test/index" },
{ name: "02_页面配置", path: "pages/02_页面配置/index" }
]
},
onBtnClick(event) {
// 1.获取item
const item = event.target.dataset.item
// 2.跳转路径
wx.navigateTo({
url: item.path,
})
}
})
path中不能使用中文，不能使用中文，不能使用中文！以/开头指明路径从根目录开始！
注册加载页面（page）
不要把开发工具固定在任务栏，会造成启动调试器不成功
单个页面（page）的js文件用于发送网络请求，获取数据，同时定义本地固定的数据。onLoad函数在页面加载时发送请求。
Page({
data: {
banners: [],
recommends: [],
// 2.作用二: 定义本地固定的数据
counter: 100,
btns: ["red", "blue", "green", "orange"]
},
// 1.作用一: 发送网络请求, 请求数据
onLoad() {
console.log("onLoad");
// 发送网络请求
wx.request({
url: "",
success: (res) => {
const data = res.data.data
const banners = data.banner.list
const recommends = data.recommend.list
this.setData({ banners, recommends })
}
})
},
...
})<view class="banner">
<swiper circular autoplay indicator-dots="{{true}}">
<block wx:for="{{banners}}" wx:key="acm">
<swiper-item>
<!-- image组件默认宽度和高度: 320x240 -->
<image mode="widthFix" src="{{item.image}}"></image>
</swiper-item>
</block>
</swiper>
</view>