微信小程序开发--页面结构

支书达李

一、微信小程序开发--页面文件组成

• [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的区别。

1. 小程序不是运行在浏览器上的，所以没有BOM和DOM对象。
2. 小程序的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')
      

      　　

 

来源：https://www.cnblogs.com/DreamchaserHe/p/11151983.html