哪个网站系统做的好,个人资讯网站建设,做网页的软件哪个好用,宁波专业网站seo公司微信小程序文件结构详解
1. 项目配置文件
project.config.json
项目的配置文件包含项目名称、appid、编译选项等配置示例#xff1a;
{description: 项目配置文件,packOptions: {ignore: []},setting: {
{description: 项目配置文件,packOptions: {ignore: []},setting: {urlCheck: true,es6: true,postcss: true,minified: true},compileType: miniprogram,libVersion: 2.19.4,appid: 你的小程序appid,projectname: 示例小程序,debugOptions: {hidedInDevtools: []}
}app.json
小程序全局配置文件配置页面路径、窗口样式、底部导航栏等示例
{pages: [pages/index/index,pages/logs/logs],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: 示例小程序,navigationBarTextStyle: black},tabBar: {list: [{pagePath: pages/index/index,text: 首页,iconPath: images/home.png,selectedIconPath: images/home-active.png}]},style: v2,sitemapLocation: sitemap.json
}2. 全局入口文件
app.js
小程序的入口文件包含小程序的生命周期函数定义全局数据和方法示例
App({// 小程序初始化完成时触发全局只触发一次onLaunch: function () {// 获取用户信息wx.getUserInfo({success: res {this.globalData.userInfo res.userInfo}})},// 小程序显示时触发onShow: function () {console.log(小程序显示)},// 小程序隐藏时触发onHide: function () {console.log(小程序隐藏)},// 全局数据globalData: {userInfo: null,version: 1.0.0}
})app.wxss
全局样式文件定义所有页面都能使用的样式示例
/* 全局样式 */
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}/* 常用文本样式 */
.text-primary {color: #07c160;
}.text-center {text-align: center;
}3. 页面文件夹 (pages)
每个页面通常包含4个文件
页面 JS 文件 (例如 index.js)
页面的逻辑文件处理页面的生命周期定义页面数据和方法示例
Page({// 页面的初始数据data: {message: Hello World,list: []},// 生命周期函数--监听页面加载onLoad: function (options) {this.getData()},// 生命周期函数--监听页面显示onShow: function () {console.log(页面显示)},// 自定义方法getData: function() {wx.request({url: api/data,success: (res) {this.setData({list: res.data})}})}
})页面 WXML 文件 (例如 index.wxml)
页面的结构文件类似HTML使用微信小程序的组件和语法示例
view classcontainer!-- 数据绑定 --text{{message}}/text!-- 条件渲染 --view wx:if{{list.length 0}}!-- 列表渲染 --view wx:for{{list}} wx:keyid{{item.name}}/view/view!-- 事件绑定 --button bindtapgetData刷新数据/button
/view页面 WXSS 文件 (例如 index.wxss)
页面的样式文件类似CSS仅对当前页面生效示例
/* 页面容器 */
.container {padding: 20rpx;
}/* 列表样式 */
.list-item {margin: 20rpx 0;padding: 20rpx;border-bottom: 1rpx solid #eee;
}/* 按钮样式 */
button {margin-top: 40rpx;background-color: #07c160;color: white;
}页面配置文件 (例如 index.json)
页面的配置文件可覆盖app.json中的配置示例
{navigationBarTitleText: 首页,usingComponents: {custom-component: /components/custom/custom},enablePullDownRefresh: true
}4. 组件文件夹 (components)
组件文件结构
与页面文件结构类似包含 js/wxml/wxss/json 四个文件示例组件 JS
Component({// 组件的属性列表properties: {title: {type: String,value: }},// 组件的初始数据data: {count: 0},// 组件的方法列表methods: {handleClick() {this.setData({count: this.data.count 1})// 触发自定义事件this.triggerEvent(customevent, {count: this.data.count})}}
})5. 其他重要文件
utils/util.js
工具函数文件存放公共方法示例
const formatTime date {const year date.getFullYear()const month date.getMonth() 1const day date.getDate()return [year, month, day].map(formatNumber).join(/)
}const formatNumber n {n n.toString()return n[1] ? n : 0${n}
}module.exports {formatTime,formatNumber
}sitemap.json
小程序搜索相关配置配置页面是否允许被微信索引示例
{desc: 关于本文件的更多信息请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html,rules: [{action: allow,page: *}]
}文件命名规范
文件夹和文件名使用小写字母多个单词使用连字符(-) 或下划线(_)连接页面文件夹与文件名保持一致组件文件夹使用有意义的名称
开发注意事项 生命周期管理 合理使用页面和应用的生命周期函数在适当的生命周期处理数据加载和清理 数据管理 使用 setData 更新数据避免频繁调用 setData合理使用全局数据 性能优化 及时销毁不需要的定时器和事件监听合理使用组件和页面的懒加载优化图片资源 代码规范 遵循统一的代码风格适当添加注释做好错误处理
