欢迎光临,了解微信小程序开发,就上易用通!

面向新手《十五》api支持解读,微信小程序框架简介

发布:2018-02-01 17:46浏览: 来源:网络 作者:cola

本系列面向全新入门者,非刚刚入门者可以不看;
一:微信小程序框架
 

目录结构

文件结构:一个微信小程序包含一个描述整体程序的app,和多个描述各自页面的page

主体部分由三个文件组成:app.js(小程序逻辑) app.json(小程序的公共设置) app.wxss(小程序的公共样式) 必须放在根目录下

一个小程序页面由四个文件组成:js(页面逻辑) wxml(页面结构) wxss(页面样式) json(页面配置)

注意:我们规定描述页面的这四个文件必须有相同的路径与文件名

配置

app.json配置

1、pages 

设置页面路径(路径名+文件名 : "pages/index/index"),数组的第一项代表小程序的初始界面,小程序中新增或者删除界面,都需要在pages里面进行配置


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

2、window

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

navigationBarBackgroundColor :导航栏背景颜色

navigationBarTextStyle :导航栏标题文字颜色,仅支持black/white

navigationBarTitleText :导航栏文字内容

backgroundColor :窗口的背景颜色

backgroundTextStyle : 下拉背景字体、loading图像的样式仅支持dark/light

enablePullDownRefresh :是否打开下拉刷新

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

tabBar

配置制定tab栏的表现,以及tab切换时显示的对应页面

Tip:通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使他是定义在tabBar配置中的页面,也不会显示底部的tab栏

color :tab上的文字默认颜色

selectedColor :tab上的文字选中之后的颜色

backgroundColor :tab的背景颜色

borderStyle :tab上边框的颜色,仅支持black/white

list :tab的列表,最少两个,最多5个

position :tab的位置,可选值bottom、top

list的包含属性

pagePath :页面路径,必须在pages中先定义

text :tab上面按钮文字

iconPath :图片路径,不能超过40kb

selectedIconPath :选中图片路径

networkTimeout

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

request :wx.request的超时时间,单位毫秒,默认为:60000

connectSocket :wx.connectSocket的超时时间,单位毫秒,默认为:60000

uploadFile :wx.uploadFile的超时时间,单位毫秒,默认为:60000

downloadFile :wx.downloadFile的超时时间,单位毫秒,默认为:60000

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"}

navigationBarBackgroundColor :导航栏颜色

navigationBarTextStyle :导航栏标题颜色

navigationBarTitleText :导航栏文字

backgroundColor :窗口的背景颜色

backgroundTextStyle :下拉背景字体,loading图的样式仅支持dark、light

enablePullDownRefresh :是否开启下拉刷新

disableScroll :设置为true 则页面整体不能上下滚动,只能在page.json中有效,在app.json中无效

逻辑层(App Service)

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

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

在 JavaScript 的基础上,我们做了一些修改,以方便地开发小程序。

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

2、增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。

3、提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。

4、每个页面有独立的作用域,并提供模块化能力。

5、由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。

6、开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。

二:api提供的部分支持解读
分享者:大师给算一卦啊,原文地址

本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读

API官方文档原文链接


小程序API官方定义:

框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。

微信小程序提供的API分类与提供能力

  • 网络

    每个微信小程序需要事先设置一个通讯域名,小程序可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求(wx.request)、 WebSocket 通信(wx.connectSocket)、上传文件(wx.uploadFile)和下载文件(wx.downloadFile)。

  • 媒体

    该类接口提供图片音频上传下载,以及视频播放控制的能力
  • 文件

    该类接口主要提供本地文件保存读取与媒体类接口配合使用,支持打开本体文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx
  • 数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。


以上三个接口是配合使用的,但是由于类型不同被文档分开描述.

  • 位置

    该类接口主要提供获取当前的地理位置(GPS经纬度或基于网络模拟的经纬度)、速度,使用微信内置地图选择和查看位置,或者通过地图组件交互的能力
  • 设备

    该类接口主要提供获得用户设备的系统信息、网络状态、重力感应、罗盘、拨打电话和扫码的能力
    1. 系统信息 该接口可以获取: | 手机型号 | 设备像素比 | 窗口宽高 | 微信设置语言 | 微信版本号 | 操作系统版本 | 客户端平台 |
    2. 网络状态 2g、3g、4g、WiFi
    3. 重力感应 通过xyz三轴的方式监听重力感应数据,频率:5次/秒,通过微信APP拿到系统陀螺仪给出的数据
    4. 罗盘 通过面对方向度数的方式监听罗盘数据,频率:5次/秒
    5. 拨打电话
    6. 扫码 调起客户端扫码界面,扫码成功后返回对应的结果
  • 界面

  • 开放接口






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。