微信小程序,小程序教程第四篇

作者: 韦德国际1946国际网址  发布:2019-07-01

微信小程序——配置

微信小程序 教程之小程序配置,微信小程序教程

微信小程序——配置

       以下便是小编对小程序配置的资料实行的种类的股价整理,希望能对开垦者有帮助。

微信小程序,小程序教程第四篇。大家利用app.json文件来对微信小程序实行全局配置,决定页面文件的不二诀窍、窗口表现、设置网络超时时间、设置多 tab 等。

以下是三个含有了具有配置选项的大约配置app.json :

{
 "pages": [
  "pages/index/index",
  "pages/logs/index"
 ],
 "window": {
  "navigationBarTitleText": "Demo"
 },
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页"
  }, {
   "pagePath": "pages/logs/logs",
   "text": "日志"
  }]
 },
 "networkTimeout": {
  "request": 10000,
  "downloadFile": 10000
 },
 "debug": true
}

app.json 配置项列表

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

pages

经受二个数组,各种都是字符串,来钦定小程序由什么页面组成。每一种代表对应页面包车型地铁【路径 文件名】消息,数组的第一项代表小程序的先导页面。小程序中新添/收缩页面,都亟待对 pages 数组进行修改。

文本名无需写文件后缀,因为框架会活动去追寻路径.json,.js,.wxml,.wxss的多个公文进行整合。

如开拓目录为:

pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss

则,大家需求在 app.json 中写

{
 "pages":[
  "pages/index/index"
  "pages/logs/logs"
 ]
}

window

用于安装小程序的状态栏、导航条、标题、窗口背景观。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000"
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light

注:HexColor(十六进制颜色值),如"#ff00ff"

如 app.json :

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

图片 1

tabBar

一经大家的小程序是多少个多 tab 应用(客户端窗口的最底层有tab栏能够切换页面),那么大家得以由此 tabBar 配置项钦点 tab 栏的变现,以及 tab 切换时展现的应和页面。

tabBar 是二个数组,只好安顿最少2个、最多5个 tab,tab 按数组的种种排序。

属性表达:

属性 类型 必填 默认值 描述
color HexColor   tab 上的文字默认颜色
selectedColor HexColor   tab 上的文字选中时的颜色
backgroundColor HexColor   tab 的背景色
borderStyle String black tabbar上边框的颜色, 仅支持 black/white
list Array   tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

在这之中 list 接受二个数组,数组中的各个项都是三个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb

图片 2

networkTimeout

能够设置各样网络央浼的超时时间。

属性表达:

属性 类型 必填 说明
request Number wx.request的超时时间,单位毫秒
connectSocket Number wx.connectSocket的超时时间,单位毫秒
uploadFile Number wx.uploadFile的超时时间,单位毫秒
downloadFile Number wx.downloadFile的超时时间,单位毫秒

debug

能够在开荒者工具中拉开 debug 形式,在开采者工具的主宰台面板,调节和测量检验音讯以 info 的款式提交,其音信有Page的挂号,页面路由,数据更新,事件触发 。 能够援救开垦者急忙稳固一些广大的标题。

page.json

每一个小程序页面也能够利用.json文件来对本页面包车型客车窗口表现打开布局。 页面包车型大巴布局比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中布署项会覆盖 app.json 的 window 中大同小异的配备项。
页面包车型大巴.json只好设置 window 相关的配置项,以调节本页面包车型地铁窗口表现,所以无需写 window 那些键,如:

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

感谢阅读,希望能支持到大家,多谢大家对本站的协助!

教程之小程序配置,微信小程序教程 微信小程序——配置 以下便是笔者对小程序配置的素材举办的系统的股盘的整理,希望能对开辟...

微信小程序 教程之注册程序,微信小程序教程

比比皆是文章:

微信小程序 教程之模块化

微信小程序 教程之注册页面

微信小程序 教程之注册程序

App()

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

object参数表明:

属性 类型 描述 触发时机
onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发onShow
onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发onHide
其他 Any 开发者可以添加任意的函数或数据到Object参数中,用this可以访问  

前台、后台定义: 当用户点击左上角关闭,只怕按了设施Home键离开微信,小程序并不曾正在的灭绝,而是进入了后台;当再次启航微信或重新展开小程序,又会从后台进入前台。

唯有当小程序进入后台一定时期,可能系统财富占用过高,才会被真正的绝迹。

演示代码:

App({
 onLaunch: function() { 
 // Do something initial when launch.
 },
 onShow: function() {
  // Do something when show.
 },
 onHide: function() {
  // Do something when hide.
 },
 globalData: 'I am global data'
})

App.prototype.getCurrentPage()

getCurrentPage()函数用户获得当前页面包车型大巴实例。

getApp()

咱俩提供了大局的getApp()函数,能够获得到小程序实例。

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

注意:

App()必须在app.js中注册,且不能够注册八个。
决不在概念于App()内的函数中调用getApp(),使用this就能够得到app实例。
无须在onLaunch的时候调用getCurrentPage(),此时page还尚未变动。
透过getApp获取实例之后,不要私下调用生命周期函数。

感激阅读,希望能支持到大家,多谢大家对本站的支撑!

教程之注册程序,微信小程序教程 体系小说: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册...

微信小程序教程(第四篇),小程序教程第四篇

小程序支付基本框架及其限制与优化

支付主导框架(MINA框架)

└─ Project-folder/ ·································· 项目所在目录

├─ pages/ ······································ 页面目录

│ ├─ index/ ··································· index页面

│ │ ├─ index.js ······························ index页面逻辑

│ │ ├─ index.wxml ···························· index页面结构

│ │ └─ index.wxss ···························· index页面样式

│ │ └─ index.json ···························· index页面配置(局地)

│ └─ logs/ ···································· logs页面

│ ├─ logs.js ······························· logs页面逻辑

│ ├─ logs.wxml ····························· logs页面结构

│ └─ logs.wxss ····························· logs页面样式

├─ utils/ ······································ 公共脚本目录

│ └─ util.js ·································· 工具脚本

├─ app.js ······································ 应用程序逻辑  用于定义整个应用的逻辑

用来监听并拍卖小程序的生命周期函数、注解全局变量

├─ app.json ································ 应用程序配置(全局)   对全部小程序的大局配置

布局小程序是由什么页面组成,配置小程序的窗口背景象等

└─ app.wxss ······························· 应用程序公共样式 用来设置任何应用的公共样式

1.app函数是四个大局函数,用来创制三个应用程序实例,各个应用程序都会有她的生命周期

2.page也是二个大局函数,用来成立页面前遭遇象

3.wxml文书是XML语法,不是HTML语法。简单的讲:wxml ≈ xml 事件系统 模板引擎

4.json文本是安顿文件,按需而建。但app.json必须建

5.页面包车型大巴具备配置或安装都会预先于大局配置或设置,即局部会覆盖全局的布置

6.WXSS负有CSS大多数表征,同临时间打开了扩张及修改。尺寸单位(rpx)能够依附显示屏宽度举行自适应。而近日只帮助一点点选取器(.class/#id/element/element, element/::after/::before)

7.种种文件夹内的文书排行统一,只有后缀名不一样,因为json配置文件中最后会将具有的页面整合成二个页面,通过同样的称呼,将页面与逻辑js、样式进行关联相配。

8. 当应用程序运转时会自动试行项目目录下的app.js文件,在app.js中通过调用全局App([option])方法创立多少个应用程序实例,其中经过参数钦点的局地特定的措施,会在特定的实行机会去实施,也正是说经常所说的生命周期事件措施。个中app.js,app.json是要求的。

小程序的生命周期函数

属性

  类型 描述 触发时机
onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用this 可以访问

生命周期函数

  • onLoad: 页面加载
  • 二个页面只会调用壹次。

  • 收到页面参数可以得到wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

  • onShow: 页面展现
  • 每趟展开页面都会调用一回。
  • onReady: 页面初次渲染完结
  • 二个页面只会调用三次,代表页面已经计划妥善,能够和视图层实行交互。

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

  • onHide: 页面隐藏
  • 当navigateTo或底层tab切换时调用。
  • onUnload: 页面卸载
  • 当redirectTo或navigateBack的时候调用。

    • 页面包车型客车初叶数据、生命周期函数、事件管理函数  

    • 属性

        类型 描述
      data Object 页面的初始数据
      onLoad Function 生命周期函数--监听页面加载
      onReady Function 生命周期函数--监听页面初次渲染完成
      onShow Function 生命周期函数--监听页面显示
      onHide Function 生命周期函数--监听页面隐藏
      onUnload Function 生命周期函数--监听页面卸载
      onPullDownRefresh Function 页面相关事件处理函数--监听用户下拉动作
      onReachBottom Function 页面上拉触底事件的处理函数
      其他 Any 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问

      页面包车型大巴路由

      在小程序中存有页面包车型地铁路由全体由框架举办田间管理,对于路由的接触方式及页素不相识命周期函数如下:

      路由方式 触发时机 路由后页面 路由前页面
      初始化 小程序打开的第一个页面 onLoad,onShow  
      打开新页面 调用 API wx.navigateTo 或使用组件<navigator /> onLoad,onShow onHide
      页面重定向 调用 API wx.redirectTo 或使用组件<navigator /> onLoad,onShow onUnload
      页面返回 调用 API wx.navigateBack或用户按左上角返回按钮 onShow onUnload(多层页面返回每个页面都会按顺序触发onUnload)
      Tab 切换 多 Tab 模式下用户切换 Tab 第一次打开 onLoad,onshow;否则 onShow onHide

      选择器

      现阶段支撑的选取器有:

      选择器 样例 样例描述
      .class .intro 选择所有拥有 class="intro" 的组件
      #id #firstname 选择拥有 id="firstname" 的组件
      element view 选择所有 view 组件
      element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
      ::after view::after 在 view 组件后边插入内容
      ::before view::before 在 view 组件前边插入内容

      尺寸单位

      rpx(responsive pixel): 可以依据显示屏宽度进行自适应。规定显示器宽为750rpx。如在 索爱6 上,荧屏宽度为375px,共有7五贰13个大意像素,则750rpx = 375px = 750概况像素,1rpx = 0.5px = 1物理像素。

      rem(root em): 规定显示器宽度为20rem;1rem = (750/20)rpx 。

      建议: 开辟微信小程序时设计员能够用 HTC6 作为视觉稿的标准

      设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
      iPhone5 1rpx = 0.42px 1px = 2.34rpx
      iPhone6 1rpx = 0.5px 1px = 2rpx
      iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

      javascript限制与优化

      (一)限制:

      • 通过传播字符串来举办代码的力量都禁用了

      鉴于安全思索,凡是通过传播字符串来实行代码的本领都禁止使用了。具体被禁掉的原生作用有:new Function、eval、Generator。这是同不平日间也比较有效的制止了就疑似H5中xss的主题材料。

      禁掉的这一个职能,对大家开拓以来影响相比较显然的应有是字符串转json,以后大家都是通过new Function、eval来处理后台cgi的回到。(移动端一般封装在zepto之类的框架中),小程序支付需求改动一下现实贯彻。

      • 与浏览器BOM相关的api都以绝非的。

      在那几个BOM中,对开拓影响最大的应当是尚未cookie。因为任何职能举个例子storage,小程序有像样的拍卖模式。而cookie在web开拓中是与后台登入相关的。小程序中是未有Cookie的,为了同盟近日大多数web app 的报随管理是利用cookie的。小程序在呼吁发送时,客户端能够动态的给伏乞设置Header发送报文的cookie。

      留神一下cookie本人不能够在客户端举行读写。因为未有cookie,H5中的csrf难题理论上是有史以来解决了。小程序是不是存在其余客户端安全难点,必要本领、时间来视察~

      (二) 优化

      • 登录:

      H第55中学,通过微信授权一般选择url重定向的主意获取code;在小程序中,通过wx.login获取code,那样防止了在此以前登入重定向的标题。

      • storage:

      小程序用storage代替了H5中的localstorage、sessionstorage。storage对各个小程序的尺寸是10M,帮助同步和异步。

      • 微信支付路子不再受限

      (三) 不便

      1)各类页面是亟需手动在app.json中开始展览注册。如果未有注册,是不实践该页面包车型地铁。

      2)展开的页面有5个的限定,在支付时索要重视调整打开页面包车型客车数额

      wxss:

      • wxss 不再协理媒体询问

      • 增加了app的flex布局

      • 引入rpx的概念

      rpx(responsive pixel): 能够依据显示器宽度进行自适应。规定显示屏宽为750rpx。如在小米6上,显示器宽度为375px,共有7四十七个大意像素,则750rpx = 375px = 750大要像素,1rpx = 0.5px = 1物理像素。

      • wxss中,不能够利用背景图片。那跟框架的统一准备看法以为全体皆组件有关

      • wxss动画不帮衬(前段时间)

      • 不协助多层选拔器.classA {} – 辅助; .classA  .classB {} – 不协助(api表明表示只支持单层选择器,重构测量试验不常多层是援救的)

      (四)index.js中的data数据只读

      页面js中,data数据是须求预约为只读。框架是单向数据绑定,修改data中的数据不会自动更新View;更新view,供给利用setData()方法。setData()更新View时,与data中的数据实行Diff比较,分歧才会更新。那样假使一直修改data,很轻巧导致data中的数据与View区别。

      • setData单次设置的数码不可能当先1024kB,供给幸免贰回设置过多的数额。

      • template,那些模版具备自身单身的功用域。

      • 支撑ES6中的…张开模块数据。

小程序支付主题框架及其限制与优化 开狠人民代表大会帝导框架(MINA框架) └─ Project-folder/ ·····...

       以下正是小编对小程序配置的素材实行的系统的股盘的整理,希望能对开采者有资助。

小编们运用app.json文件来对微信小程序开始展览全局配置,决定页面文件的门道、窗口表现、设置互连网超时时间、设置多 tab 等。

以下是一个包含了具备配置选项的简单配置app.json :

{
 "pages": [
  "pages/index/index",
  "pages/logs/index"
 ],
 "window": {
  "navigationBarTitleText": "Demo"
 },
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页"
  }, {
   "pagePath": "pages/logs/logs",
   "text": "日志"
  }]
 },
 "networkTimeout": {
  "request": 10000,
  "downloadFile": 10000
 },
 "debug": true
}

app.json 配置项列表

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

pages

收受贰个数组,每一类都以字符串,来内定小程序由什么页面组成。每一种代表对应页面包车型地铁【路线 文件名】新闻,数组的率先项代表小程序的初始页面。小程序中新增加/减少页面,都亟待对 pages 数组实行改换。

文本名没有要求写文件后缀,因为框架会自行去寻找路线.json,.js,.wxml,.wxss的多个文件举行整合。

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:微信小程序,小程序教程第四篇

关键词: 伟德国际官网