最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
微信小程序开发个人笔记——代码基本结构分析
- 分类:WEB前端
- 时间:2017-11-04
- 共716人围观
简介相关文档链接,小程序简易教程: https://mp.weixin.qq.com/debug/wxadoc/dev/ ,微信小程序设计指南: https://mp.weixin.qq.com/debug/wxadoc/design/index.html
相关文档链接
小程序简易教程: https://mp.weixin.qq.com/debug/wxadoc/dev/
微信小程序设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html
一、代码基本结构分析
app.json
项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)
{ // 当前程序是由哪些页面组成的(第一项默认为初始页面) // 所有使用到的组件或页面都必须在此体现 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages "pages": [ ... ], // 应用程序窗口设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window "window": { ... }, // 应用导航栏设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar "tabBar": { ... }, // 网络超时设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout "networkTimeout": {}, // 是否在控制台输出调试信息 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug "debug": true }
app.js
项目主入口文件(用于创建应用程序对象)
// App函数是一个全局函数,用于创建应用程序对象 App({ // ========== 全局数据对象(整个应用程序共享) ========== globalData: { ... }, // ========== 应用程序全局方法 ========== method1 (p1, p2) { ... }, method2 (p1, p2) { ... }, // ========== 生命周期方法 ========== // 应用程序启动时触发一次 onLaunch () { ... }, // 当应用程序进入前台显示状态时触发 onShow () { ... }, // 当应用程序进入后台状态时触发 onHide () { ... } })
app.wxss
[可选]项目全局的样式文件,所有样式全局生效,内容遵循CSS标准语法
二、pages目录
存放程序中存在的页面 每个页面组件也分为四个文件组成: pagename.js 页面逻辑文件,用于处理页面生命周期控制和数据处理 pagename.json 设置当前页面工作时的一些配置 此处可以覆盖app.json中的window设置 也就是说只可以设置window中设置的熟悉 pagename.wxml wxml指的是 Wei Xin Markup Language 用于定义页面中元素结构的 语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法 pagename.wxss wxss指的是 Wei Xin Style Sheet 用于定义页面样式的 语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)
三、utils目录
存放一些功能型脚本
四、小程序中的配置文件
小程序中的配置文件分为两种: 1. 全局配置文件,根目录下的 app.json 2. 页面配置文件,每个页面目录下的 [pagename].json
五、tabBar底部选项卡配置
{ "tabBar": { "color": "#ccc", "selectedColor": "#35495e", "borderStyle": "white", "backgroundColor": "#f9f9f9", "list": [ { "text": "榜单", "pagePath": "pages/board/board", "iconPath": "images/board.png", "selectedIconPath": "images/board‐actived.png" }, { "text": "搜索", "pagePath": "pages/search/search", "iconPath": "images/search.png", "selectedIconPath": "images/search‐actived.png" }, { "text": "我的", "pagePath": "pages/profile/profile", "iconPath": "images/profile.png", "selectedIconPath": "images/profile‐actived.png" } ] } }
六、页面结构
每个页面都分为四个文件组成: 1. [pagename].wxml -- 用于编写页面结构,注意不是HTML 2. [pagename].wxss -- 用于编写页面样式 3. [pagename].js -- 页面业务脚本 4. [pagename].json -- 页面配置文件