微信小程序开发笔记(二)

1.小程序代码构成

　　通过开发者工具快速创建了一个 wechatdemo 项目。项目里边生成了不同类型的文件:

　　.json为配置文件

　　.wxml 为模板文件，相当于HTML模板

　　.wxss 为样式文件，相当于HTML的CSS样式表

　　.js 为JS 脚本逻辑文件，相当于HTML的js脚本

　　一个描述整体程序的 app

　　多个描述各自页面的 pages

　　一个项目IDE配置文件 project.config.json

　　一个共用程序逻辑库 utils

2.一个小程序主体部分(名称为app)由三个文件组成，必须放在项目的根目录

　　文件　　　　　　作用　　　　　　必填
　　app.js　　　　　　小程序逻辑　　　　是
　　app.json 　　　　小程序公共配置　　是
　　app.wxss 　　　　小程序公共样式表　否

　　2.1 一个描述整体程序的 app 之app.js文件(注册小程序项目)

　　1.App() 必须在 app.js 中注册，且不能注册多个。
2.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
4.通过 getApp() 获取实例之后，不要私自调用生命周期函数。

　　其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
　　相当于ApplicationContext，在整个小程序上下文中都以使用，即服务整个小程序scope。
　　app.js程序主体逻辑层使用this访问，在页面.js逻辑层使用getApp().属性名称可以访问。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数：与 wx.getLaunchOptionsSync 一致

onShow(Object object)
小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数：与 wx.onAppShow 一致

onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
参数：与 wx.onError 一致

onPageNotFound(Object object)
基础库 1.9.90 开始支持，低版本需做兼容处理。
小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。
参数：与 wx.onPageNotFound 一致

App开发文档传送门

　　2.2 一个描述整体程序的 app 之app.json文件(配置小程序项目)

　　作用：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

　　所有的选项配置pages、window、tabBar、networkTimeout、debug
　　app.json 配置项列表:

　　属性类型必填描述
      pages String Array 是设置页面路径
        window Object 否设置默认页面的窗口表现
        tabBar Object 否设置底部 tab 的表现
        networkTimeout Object 否设置网络超时时间
        debug Boolean 否设置是否开启 debug 模式

"pages": [
    //这里的的第一个页面作为首页显示
    "pages/index/index",
    "pages/logs/logs"
  ],
//小程序中新增/减少页面，都需要对 pages 数组进行修改

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "演示",
    "navigationBarTextStyle": "black"
  },

属性                　　　　　　 类型    　　默认值    描述       最低版本
navigationBarBackgroundColor  HexColor  #000000   导航栏背景颜色，如 #000000    
navigationBarTextStyle        string    white     导航栏标题颜色，仅支持 black / white    
navigationBarTitleText        string    wechat    导航栏标题文字内容    
navigationStyle            　 string    default   导航栏样式，仅支持以下值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮    微信客户端 7.0.0
backgroundColor               HexColor  #ffffff   窗口的背景色    
backgroundTextStyle        　 string    dark    　下拉 loading 的样式，仅支持 dark / light    
backgroundColorTop        　  string    #ffffff   顶部窗口的背景色，仅 iOS 支持    微信客户端 6.5.16
backgroundColorBottom         string    #ffffff   底部窗口的背景色，仅 iOS 支持    微信客户端 6.5.16
enablePullDownRefresh         boolean   false     是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh    
onReachBottomDistance         number    50        页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom    
pageOrientation            　 string    portrait  屏幕旋转设置，支持 auto / portrait / landscape    详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)
disableScroll            　 　boolean    false    设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置    
usingComponents              Object    否         页面自定义组件配置    1.6.3
style                　　　   string    default    启用新版的组件样式    2.10.2

window配置传送门

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "page/component/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "page/weui/example/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "扩展组件"
      },
      {
        "pagePath": "page/API/index",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      },
      {
        "pagePath": "page/cloud/index",
        "iconPath": "image/icon_cloud.png",
        "selectedIconPath": "image/icon_cloud_HL.png",
        "text": "云开发"
      }
    ]
  },

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象。

tabBar配置传送门，传送门里比我这里详细多了。。。

3.多个描述各自页面的 pages(pages目录存储小程序的每个页面)

　　文件　　　　　　作用　　　　　　必填
　　页面名称.js　　　　本页面逻辑逻辑　是
　　页面名称.json 　　本页面配置　　　　否
　　页面名称.wxml 　　本页面结构　　　　是
　　页面名称.wxss 　　本页面样式表　　　否

　　3.1 页面的js逻辑层(注册页面)

页面的逻辑层：其主要功能就是“注册页面”，每个页面目录/页面名称.js
页面注册的使用：与app.js的注册小程序项目函数App(Object)类似使用
Page(Object)；Object参数对象{}表示，其指定页面的初始数据、生命周期函数、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

页面js传送门

　　3.2 页面的json配置(页面名称.json)

每一个页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。

总结：每个页面.json(页面配置)，其实就是对app.json的window配置项进行继承覆盖重写

应用：app.json中配置了启用上下拉刷新，但某些页面不需要，那么就可以在页面名.json中进行重写禁用了。又比如每个页的标题，也是需要重写的。

 　　{
        "navigationBarBackgroundColor":"#ffffff",
        "navigationBarTextStyle":"black",
        "navigationBarTitleText":"微信接口功能演示",
        "backgroundColor":"#eeeeee",
        "backgroundTextStyle":"light"
    }

所有app.json中的window配置项在页面名.json中都是可以覆盖重写的，
但页面名.json配置又有自己的特性是app.json小程序全局配置没有的。
属性类型默认值描述
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动；
只在 page.json 中有效，无法在 app.json 中设置该项。

　　3.3 页的视图层(页面名称.wxml 和页面名称.wxss)

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

数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

定义模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

<!--pages/item/item.wxml--><template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<!--pages/index/index.wxml--><import src="../item/item.wxml"/>
<template is="msgItem" data="{{...item}}"/>

<!--pages/index/index.js-->Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

页面wxml传送门

3.4 WXS

（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

页面wxs语法传送门

4.根目录下的project.config.json

1).项目配置文件或称为项目IDE配置文件

　　在“微信开发者工具”上做的任何配置都会写入到这个文件。

2).应用场景：

　　通常在使用一个开发IDE工具的时候，都会针对各自喜好做一些个性化配置，

　　例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

3).解决办法：就是这个project.config.json项目IDE配置文件

　　当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，

　　开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，

　　其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

4).引申

　　这么说，每个项目都可以定制了一套自己喜欢的IDE配置

5.一个共用程序逻辑库(util目录)

这个目录可以自定义名称

公共的js函数文件，通过module.exports的方式暴露pages下的每个页面使用

不需要每个页面编写重复的Js代码。

来源：https://www.cnblogs.com/antao/p/12596306.html

标签

微信小程序开发

微信开发

微信页面

string

微信小程序开发笔记(二)

1.小程序代码构成

2.一个小程序主体部分(名称为app)由三个文件组成，必须放在项目的根目录

2.1 一个描述整体程序的 app 之app.js文件(注册小程序项目)

2.2 一个描述整体程序的 app 之app.json文件(配置小程序项目)

3.多个描述各自页面的 pages(pages目录存储小程序的每个页面)

3.1 页面的js逻辑层(注册页面)

3.2 页面的json配置(页面名称.json)

3.3 页的视图层(页面名称.wxml 和 页面名称.wxss)

数据绑定

列表渲染

条件渲染

定义模板

使用模板

模板的作用域

3.4 WXS

4.根目录下的project.config.json

1).项目配置文件或称为项目IDE配置文件

2).应用场景：

3).解决办法：就是这个project.config.json项目IDE配置文件

4).引申

5.一个共用程序逻辑库(util目录)

　　2.1 一个描述整体程序的 app 之app.js文件(注册小程序项目)

　　2.2 一个描述整体程序的 app 之app.json文件(配置小程序项目)

　　3.1 页面的js逻辑层(注册页面)

　　3.2 页面的json配置(页面名称.json)

　　3.3 页的视图层(页面名称.wxml 和页面名称.wxss)