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

时间:2022-01-26 00:32:42

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

  • [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')