微信开发者工具生成的页面js默认提供了几个js方法，现在自己要定义一些变量和编写一些方法，放在这个页面的什么位置比较好？感觉放哪里都不合适。
带着疑问问了豆包，豆包给出了最清晰、最标准、最不会乱的微信小程序页面 JS 写法规范，你一看就懂，以后再也不会纠结变量和方法放哪里。
最终推荐排版：data → 自定义变量 → 生命周期 → 系统事件 → 自定义方法
1、你自己的东西应该放哪里？（一句话规则）
所有你自己写的：变量、方法、函数，全部放在 Page () 内部，和系统默认方法平级。
2、具体怎么放（最标准写法）
2.1、页面要显示的变量 → 放 data 里
作用：wxml 里能直接用、数据双向绑定、视图刷新。
data: {
userName: "张三",
age: 20,
list: []
},2.2、不需要渲染到页面的普通变量 → 直接在 Page 内定义
不要放 data，不要放外面，直接写在平级位置。
Page({
data: { ... },
// 自己的变量（页面内可用，不渲染到界面）
timer: null,
requestCount: 0,
userInfo: null,
onLoad() { ... },
})2.3、自己写的方法 / 函数 → 直接放在 Page 内平级
这是最常用、最标准、最不会错的位置！
Page({
data: { ... },
// 自定义方法 1
getUserInfo() {
console.log("获取用户信息");
},
// 自定义方法 2
calcTotalPrice() {
return 100;
},
// 点击事件
btnClick() {
this.getUserInfo(); // 调用自己的方法
},
onLoad() {
this.getUserInfo(); // 生命周期里调用
},
})3、最终标准排版
问题解答在这里，就是想关心自定义变量和自定义函数该放什么位置，才能让整个文件看起来最清晰、最不会乱。把默认方法的注释去掉，然后换成一行书写，世界瞬间清晰了。
Page({
// 1. data 放最上面（界面渲染用）
data: {
name: ""
},
// 2. 自定义变量（不需要渲染的）
timer: null,
count: 0,
// 3. 生命周期方法（系统自带）
onLoad(options) {},
onReady() {},
onShow() {},
onHide() {},
onUnload() {},
// 4. 页面事件（系统自带）
onPullDownRefresh() {},
onReachBottom() {},
onShareAppMessage() {},
// 5. 你自己写的方法（放最后最清晰）
myMethod1() {},
myMethod2() {},
btnClick() {}
});4、默认生成的页面JS结构（备份）
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})