微信小程序开发（入门篇）

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

注：如果需要用代码，请把注释删除或换行{ "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   导出

    • 1 2 3 4 5 6 7

      function say(){   console.log("我是Say方法") } //导出 module.exports = {   say:say }

    • import　导入
    • require  引用

    • 1	const util = require('../../utils/util.js')