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

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

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

巴特西

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

最新文章

热门文章