嵌入机器学习的微信小程序教程（二）——微信小程序框架

微信小程序框架

小程序的配置

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

json本身作为数据存储格式是禁止使用注释的，比如ajax请求的json文件。
小程序中json文件作为配置文件也不能添加注释。
当然，在其他某些情况下json文件可以被注释。

{
  "cloud": true,	

表明使用云开发。

app.json中可以配置的配置项有很多，常用的有以下几个。

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

"pages": [
  "pages/index/index",
  "pages/anlyse/anlyse",
  "pages/search/search",
],

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",  
    "navigationBarTitleText": "话题分析",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json",

另外，window字段中backgroundColor属性设置的颜色并不能在页面直接看到，它是小程序下拉页面时，看到的页面外的背景颜色。
enablePullDownRefresh属性为Boolean类型的，是否支持全局下拉刷新。
pageOrientation为是否支持屏幕旋转。

windows属性有很多，详细可见微信官方文档。

tabBar字段——用于多 tab 应用，客户端窗口的底部或顶部有 tab 栏可以切换页面

"tabBar": {
  "color": "#ffffff",
  "selectedColor": "#FF7F24",
  "backgroundColor": "#000000",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "搜索",
      "iconPath": "images/focus.png",
      "selectedIconPath": "images/focus_active.png"
    },
    {
      "pagePath": "pages/anlyse/anlyse",
      "text": "分析",
      "iconPath": "images/top_icon.png",
      "selectedIconPath": "images/top_active_icon.png"
    }
  ]
}
}

此外还有，networkTimeout：网络超时设置，debug：开启debug模式等。

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

小程序的逻辑

小程序的逻辑写在.js文件中，全局变量定义在app.js中，如：

    this.globalData = {
      myglobalData: "全局变量"
    }

在使用全局变量时，必须要获取全局的应用实例，通过：

var app = getApp();

每个页面下都有一个书写逻辑的js文件

Page({
  data: {
  text: "页面数据"
  },	//页面数据，用来维护视图，json格式
  onLoad: function(options) {  },	//监听加载
  onReady: function() {  },	//监听初次渲染完成
  onShow: function() {  },	//监听显示
  onHide: function() {  },	//监听隐藏
  onUnload: function() {  },	//监听卸载
  onPullDownRefresh: function() {  },	//监听下拉
  onReachBottom: function() {  },	//监听上拉触底
  onShareAppMessage: function () {  },	//监听右上角分享
})

小程序的样式

WXSS (WeiXin Style Sheets)是一套样式语言，小程序通过wxss文件，用于描述 WXML 的组件样式，类似于css，但有所不同。
WXSS 扩展的特性有：

• 尺寸单位 使用 rpx，响应像素位置代替了px，规定屏幕宽为750rpx。
• 样式导入 使用 @import与相对路径导入外联样式表。

扩展了rpx单位。其中app.wxss默认为全局样式，作用所有页面。