微信小程序配置

开发小程序必要的文件有哪些？

单个页面的js文件、
单个页面的html文件
公共的json配置文件
公共的js文件

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

小程序配置 app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",    
    "navigationBarBackgroundColor": "#fff",  
    "navigationBarTitleText": "WeChat",   //标题
    "navigationBarTextStyle":"black"
  }
}

1、pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。（这个是字段是必填字段）
数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀。
2、window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
3、tabBar字段
1、当设置 position 为 top 时，将不会显示 icon（图标）
2、tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

逻辑层

• 每个页面有独立的作用域、并提供模块化能力。

APP

App() 函数用来注册一个小程序。指定小程序的生命周期函数等。

Page

Page() 函数用来注册一个页面。指定页面的初始数据、生命周期函数、事件处理函数等。

生命周期函数

• onLoad: 页面加载

  • 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

• onShow: 页面显示

  • 每次打开页面都会调用一次。

• onReady: 页面初次渲染完成

  • 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  • 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

• onHide: 页面隐藏

  • 当navigateTo或底部tab切换时调用。

• onUnload: 页面卸载

  • 当redirectTo或navigateBack的时候调用。

路由方式

打开新页面 ：调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>

页面重定向： 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

页面返回： 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

Tab 切换： 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

重启动： 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/> |

Tips

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
如果需要全局的数据可以在 App() 中设置

模块化

公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

注意： require 暂时不支持绝对路径

wxml

是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

他的能力：数据绑定、列表渲染、条件渲染、模板（template）、事件

尺寸单位

750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

工具配置 project.config.json

wxml模板

wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中，我们通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为

wxss样式

WXSS 在底层支持新的尺寸单位 rpx换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题

发布代码

template
打多久啊打

app data="