杭州工贝网络科技有限公司为您免费提供杭州APP开发,杭州软件公司,杭州软件开发等相关信息发布和资讯展示,敬请关注!

杭州工贝网络科技有限公司

杭州工贝网络科技有限公司
杭州工贝网络科技有限公司

咨询热线
15824157613
新闻类别
洛贝产品中心
联系我们
全国咨询热线:15824157613

手机:15824157613

传真:

邮箱:82820663@qq.com

地址:杭州滨江区聚园路8号

微信小程序之配置和逻辑

来源:http://www.gongbeifuwu.com/news167150.html
发布时间:2019-11-20 9:53:00

1. 配置

?app.json

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

?page.json

 每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

1.2 配置项列表

1.2.1 Pages

?接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

1.2.2.1 Window

?用于设置小程序的状态栏、导航条、标题、窗口背景色

1.2.3.1 tabBar

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

 当设置 position 为 top 时,将不会显示 icon

 tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

1.2.4 networkTimeout

?可以设置各种网络请求的超时时间

1.2.5 debug

?可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册页面路由数据更新事件触发 。 可以帮助开发者快速定位一些常见的问题。


1.3.1 page.json

?每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。


1.4 目录结构

?小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

?一个小程序页面由四个文件组成,分别是:页面逻辑,页面结构,页面样式表,页面设置。

逻辑

2. 逻辑(App Service)

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

?逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈,小程序额外在Js基础上做了一些修改:

 增加 App 和 Page 方法,进行程序和页面的注册。

 增加 getAp

2.1 注册程序

?App

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

2.1.1 示例代码

?当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。


.2.1.3获取App

?小程序提供了全局的 getApp() 函数,在其他页面可以获取到小程序实例,即app。


2.2.1 场景值

?场景值,即是当前小程序的场景,可以通过场景值进行如下行为:

?常规行为记录

 行为埋点: 用户行为分析

 路由埋点: 页面pv分析

 路径埋点: 流转记录

 错误埋点: 错误收集

?场景分流操作

 根据用户进入的场景不同作出不同反应

 场景一:客户通过公众号场景进入(1035),可以判断为用户为远程订餐,进入预定模式

 场景二: 客户扫描店内

2.3 注册页面Page

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

2.3.2 初始化数据

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

?渲染层可以通过 WXML 对数据进行绑定。


2.3.3 生命周期

?onLoad: 页面加载

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

?onShow: 页面显示

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

?onReady: 页面初次渲染完成

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

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

?onHide: 页面隐藏

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

?onUnload: 页面卸载

 当redirectTo或navigateBack的时候调用。

2.3.4 页面相关事件

?onPullDownRefresh: 下拉刷新

 监听用户下拉刷新事件。

 需要在config的window选项中开启enablePullDownRefresh。

 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

?onReachBottom: 上拉触底

 监听用户下拉触底事件。

?onPageScroll: 页面滚动

 监听用户滑动页面事件。

 参数为 Object

?onShareAppMessage: 用户转发

 只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

 用户点击转发按钮的时候会调用

 此事件需要 return 一个 Object,用于自定义转发内容

2.3.5 事件处理函数

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

2.3.6 setData() 参数格式  

?接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。

?其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].  message,a.b.c.d,并且不需要在 this.data 中预先定义。

?注意:

 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致

 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

2.4.1 页面栈

?小程序的所有路由均交给了框架来管理。

?页面栈

小程序引入了栈的概念


2.4.2 获取当前页面

?getCurrentPages()

函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

2.4.3 触发方式


2.4.4 页面跳转触发流程

?Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例)

2.4.5 注意事项

?navigateTo, redirectTo 只能打开非 tabBar 页面。

?switchTab 只能打开 tabBar 页面。

?reLaunch 可以打开任意页面。

?页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

?调用页面路由带的参数可以在目标页面的onLoad中获取。

2.5.1 文件作用域

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

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

2.5.2 模块化

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

?注意

 exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。

 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

2.5.2 模块化

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

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



相关标签:小程序,
相关新闻
相关产品