一、微信小程序开发--页面文件组成
-
[page.name].js
- 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理
-
[page.name].wxml
- wxml指的是Wei Xin Markup Language
- 用于定义页面元素结构的. 语法遵循XML语法,不是HTML语法
-
[page.name].json (可选)
- 设置当前页面的Window的配置,此处会覆盖app.json中的window设置,也就是说,只可以设置window中设置的属性。
-
[page.name].wxss (可选)
- wxml指的是 Wei Xin Style Sheet
- 用于定义页面样式的语法,语法遵循Css语法,扩展了css的基本用法和长度单位 (主要是rpx 响应式像素)
二、微信小程序开发--应用程序设置(app.json)
注:如果需要用代码,请把注释删除或换行
{
"pages": [ //pages:用来配置页面路径的
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light", //下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "#219bf9", //导航条的背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle": "black" //导航栏标题颜色,仅支持 black / white
"enablePullDownRefresh":true, //是否全局开启下拉菜单刷新
"backgroundColor":"#eee" //页面背景颜色
},
"debug":true, //可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有 Page 的注册,页面路由,数据更新,事件触发等。可以帮助开发者快速定位一些常见的问题。
"sitemapLocation": "sitemap.json", "tabBar":{
"selectedColor":"#e3eeeo", //tab 上的文字选中时的颜色,仅支持十六进制颜色
"backgroundColor": "#666", //tab 的背景色,仅支持十六进制颜色
"color": "#333", //tab 上的文字默认颜色,仅支持十六进制颜色
"borderStyle": "black", //tabbar 上边框的颜色, 仅支持 black / white "list":[ //tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
{
"text": "index", //tab 上按钮文字
"pagePath":"pages/index/index", //页面路径,必须在 pages 中先定义
"iconPath":"pages/images/1.jpg", //图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
"selectedIconPath":"pages/images/1.jpg" //选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
},
{
"text": "logs",
"pagePath":"pages/logs/logs",
"iconPath": "pages/images/2.jpg",
"selectedIconPath":"pages/images/2.jpg"
}
]
}
}
三、微信小程序开发--页面应用程序设置(page.json)
每个单独的页面下都有一个.json文件,这里面的内容只可以覆盖app.json文件中的window里面的内容。
四、微信小程序逻辑层的JavaScript和平时用的JavaScript的区别。
- 小程序不是运行在浏览器上的,所以没有BOM和DOM对象。
- 小程序的JS有一些额外的成员
- App 方法 用于定义应用程序实例对象
- Page 方法 用于定义页面对象
- getApp 方法 用于获取全局应用程序对象
- getCurrentPages 方法 用于获取当前页面的调用栈(数组,最后一个元素就是当前页面)
- wx对象 用来提供核心API
3.小程序的JS支持CommonJS规范的
- exprot 导出
function say(){
console.log("我是Say方法")
}
//导出
module.exports = {
say:say
}- import 导入
- require 引用
const util = require('../../utils/util.js')