微信小程序_(逻辑层、视图层、配置文件)

421 查看

1.配置文件

page.json来决定

初始化项目的时候,文件自动生成app.json来对小程序进行全局配置。

2.逻辑层(App Server)

小程序开发框架的逻辑层是由JavaScript编写。

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。 在 JavaScript的基础上,做了一些修改,以方便地开发小程序。

1)增加 AppPage方法,进行程序页面的注册。

App()函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

App.prototype.getCurrentPage()
getCurrentPage() 函数用户获取当前页面的实例。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

2)App()叫做注册程序,Page()叫做注册页面

Page()接受一个 object参数,
指定页面的初始数据、生命周期函数、事件处理函数等

3)初始化数据

初始化数据将作为页面的第一次渲染。
data将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成JSON的格式:字符串,数字,布尔值,对象,数组

渲染层可以通过WXML 对数据进行绑定。
eg:下面这个是一段wxml的代码

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

下面这个是一段.js代码,data是初始化页面数据

Page({
   data: {
   text: 'init data',
   array: [{msg: '1'}, {msg: '2'}]
   }
})

4)页面的生命周期函数

a)onLoad: 页面加载
一个页面只会调用一次。
参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。这个是什么意思呢?

onLoad:function(options){
    // options 就是参数
    // options.redirect
}

b)onShow: 页面显示

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

c)onReady: 页面初次渲染完成

一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互

对界面的设置如wx.setNavigationBarTitle请在onReady之后设置

d)onHide: 页面隐藏

navigateTo或底部tab切换时调用。

e)onUnload: 页面卸载

redirectTonavigateBack的时候调用。

5)页面相关事件处理函数

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。
需要在configwindow选项中开启enablePullDownRefresh

6)事件处理函数

除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行Page 中定义的事件处理函数

eg:

// .wxml
<view bindtap="tap_view"> click me!</view>

// .js
Page({
    tap_view:function(){
        console.log('view taped!');
    }
})

7)Page.prototype.setData()

setData函数用于将数据逻辑层发送到视图层,同时改变对应的this.data的值。

注意:
1.直接修改 this.data无效,无法改变页面的状态,还会造成数据不一致。
2.单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

这里的this指的是.js文件

8).页面的路由

小程序中所有页面的路由全部由框架进行管理
路由方式:

a.初始化
打开新页面:调用 API wx.navigateTo 或使用组件<navigator />(节点方式)

b.打开新页面,相当于iOS中的navpush
调用 API wx.navigateTo 或使用组件 <navigator />,调用后路由前页面函数:onHide

c.页面重定向
调用 API wx.redirectTo 或使用组件 <navigator />,调用后路由前页面函数:onUnload

d.页面返回
调用 API wx.navigateBack或用户按左上角返回按钮

e.Tab切换

Tab模式下用户切换Tab

9)文件作用域

JavaScript 文件中声明的变量函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

通过全局函数 getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App() 中设置

10)模块化

我们可以将一些公共的代码抽离成为一个单独的js 文件,作为一个模块。模块只有通过 module.exports
才能对外暴露接口。

module.exports = {
    sayHello: sayHello
}
function sayHello(name){
    console.log('Hello' + name + '!');
}

// 使用

var common = require('common.js');   
Page({
    helloMaer:function(){
        common.sayHello('Maer');
    }
})

11)API

小程序开发框架提供许多原生api,可以方便的掉漆微信提供的功能,eg:获取用户信息,本地存储,微信支付等.

wx.on开头的API是监听某个时间发生的API接口,接受一个CALLBACK函数作为参数。当该时间触发的时候,会调用callback函数。
如果没有特殊约定,其他的api接口都接受一个object作为参数。
object中可以指定success, fail, complete来接收接口调用结果。

 success     Function        接口调用成功的回调函数
 fail        Function        接口调用失败的回调函数
 complete    Function        接口调用结束的回调函数(调用成功、失败都会执行)

这里举例几个常用的api接口:

wx.request    发起的是https请求。**一个微信小程序,同时只能有5个网络请求连接。**

数据 API 列表:

wx.getStorage  // 获取本地数据缓存
wx.setStorage  // 设置本地数据缓存
wx.clearStorage // 清除本地数据缓存

获取网络类型

wx.getNetworkType(OBJECT)

eg:

wx.getNetworkType({
    success:function(res){
        var networkType = res.networkType;  // 返回网络类型2g,3g,4g,wifi
    }
})

界面 API 列表:

参考:https://mp.weixin.qq.com/debug/wxadoc/dev/api/

3.视图层

框架的视图层由WXMLWXSS编写,由组件来进行展示。

逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。

组件(Component)是视图的基本组成单元。

1)WXML

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

wxml作用主要有:数据绑定列表渲染条件渲染模板事件引用

数据绑定:

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

// page.js

Page({
data:{
message: 'Hello world'!
}
})

列表渲染

// wxml
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
    data:{
        array:[0, 1, 2, 3, 4]
    }
})

条件渲染

<!--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' 
     }
 })

<block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

 <block wx:if="{{true}}"> 
    <view> view1 </view> 
    <view> view2 </view>
</block>

模板

总结:在属性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template>
扩展运算符...来将一个对象展开

Page({
    data:{
         staffA:{firstname:'a', lastname:'b'}
    }
})

注意: 如果js:Page({
data:{
foo:'a',
bar:'b'
}
})`

<template data={{foo, bar}}> data组合对象为:{foo:'a', bar:'b'}

<template data={{'A':foo, 'B':bar}}> data组合对象为:{'A':'a', 'B':'b'}

模板拥有自己的作用域,只能使用data传入的数据。

事件
eg:

<view bindtap="add">{{count}}</view>

Page({
    data:{
         count:1
    }
    add: function(e){
         this.setData({
             count:this.data.count + 1
         })
    }
})

2)wxml
为了适应广大的前端开发者,WXSS具有 CSS 大部分特性。 同时为了更适合开发微信小程序,对 CSS 进行了扩充以及修改。

尺寸单位

rpx(responsive pixel) 规定屏幕宽为750rpx
样式导入
使用@import
语句可以导入外联样式表@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。


2018 - 知识虫 - 我的知识库 渝ICP备16002641号-2

渝公网安备 50010702501581号