吴声子夜歌的博客

WeUI组件库官方文档WeUI组件库Git仓库weui-wxss样式库Git仓库：开发者工具打开dist目录，可查看样式demo。

安装完成后，项目根目录会出现 node_modules文件夹，其中包含 weui-miniprogram。构建成功后，项目根目录会生成 miniprogram_npm文件夹，WeUI 组件就在这里。在app.json中配置。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。

获取视频号直播卡片/视频卡片的分享来源，仅当卡片携带了分享信息、同时用户已授权该小程序获取视频号分享信息且启动场景值为 1177、1184、1195、1208 时可用。当前小程序必须关联一个公众号，且这个公众号是完成了微信认证的，才能调用 chooseInvoiceTitle。获取微信群聊场景下的小程序启动信息。隐私合规开发指南详情可见《小程序隐私协议开发指南》。获取参考红包封面地址参考 微信红包封面开发平台。隐私合规开发指南详情可见《小程序隐私协议开发指南》。查询当前用户授权的音视频通话设备（组）信息。

Tencent SOTER是腾讯于2015年开始制定的生物认证平台与标准，通过与厂商合作，目前已经在一百余款、数亿部Android设备上得到支持，并且这个数字还在快速增长。Tencent SOTER设计支持指纹认证、人脸认证和声纹认证，目前，Tencent SOTER已经在微信指纹支付、微信公众号和小程序指纹授权接口等场景使用。接入Tencent SOTER,小程序可以在不获取用户指纹图案的前提下，在Android设备上实现可信的指纹认证，获得与微信指纹支付一致的安全快捷认证体验。

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个scope，用户选择对scope进行授权，当授权给一个scope之后，其对应的所有接口都可以直接使用。如果用户未接受或拒绝过此权限，会弹窗询问用户，用户单击同意后方可调用接口。如果用户已授权，可以直接调用接口。如果用户已拒绝授权，则不会出现弹窗，而会直接进入接口fail回调。此类接口在权限中的对象scope的字段和接口的对应关系如表所示。scope对应接口描述用户信息（小程序已回收，请使用头像昵称填写，小游戏可继续调用）

该接口仅在小程序插件中可调用，调用接口获得插件用户标志凭证（code）。插件可以此凭证换取用于识别用户的标识 openpid。用户不同、宿主小程序不同或插件不同的情况下，该标识均不相同，即当且仅当同一个用户在同一个宿主小程序中使用同一个插件时，openpid 才会相同。参数：Object argsargs.success回调函数：参数：Object res调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（union

【代码】小程序——设备API。

延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）因为自定义组件中的 setData 和 triggerEvent 等接口本身是同步的操作，当这几个接口被连续调用时，都是在一个同步流程中执行完的，因此若逻辑不当可能会导致出错。

增强 ScrollView 实例，可通过 wx.createSelectorQuery 的 NodesRef.node 方法获取。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件。显示 tabBar 某一项的右上角的红点。

移除用户点击右上角菜单的「复制链接」按钮时触发的事件的全部监听函数。用户点击右上角菜单的「复制链接」按钮时触发的事件的监听函数。支持拉起贴图发表页，用户可将图片与文字内容发表为贴图。监听用户点击右上角菜单的「复制链接」按钮时触发的事件。用法详情见 小程序私密消息使用指南。设置右上角点开的详情界面中的分享按钮是否可用。参数：Object res。隐藏当前页面的转发按钮。

通过小程序打开任意公众号文章（不包括临时链接等异常状态下的公众号文章），必须有点击行为才能调用成功。注意：微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持。返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功。通过小程序打开公众号会话界面。通过小程序打开公众号主页。参数：Object res。参数：Object err。通过小程序打开问一问话题。

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。重写正在进行中的路由事件，详见 路由重写。关闭所有页面，打开到应用内的某个页面。参数：Object res。

单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。注意：storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。在微信客户端中，向 vConsole 中输出日志。UpdateManager 对象，用来管理更新，可通过 wx.getUpdateManager 接口获取实例。获取全局唯一的版本更新管理器，用于管理小程序更新。需要一定的微信客户端版本支持，在不支持的客户端上，会使用同步实现来返回。判断小程序的API，回调，参数，组件等是否在当前版本可用。

本例通过recorderManager.wxml中的5个按钮来调用RecorderManager录音管理器的录音、暂停、继续录音、停止录音和播放录音功能。从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。暂停正在播放的语音。同时只允许一个语音文件正在播放，如果前一个语音文件还没播放完，将中断前一个语音播放。获取的，它是小程序官方发布的接口，功能强大，包含其他背景音乐处理接口的所有功能。

当需要更精细的控制时，可指定 bitrate、fps、和 resolution，当 quality 传入时，这三个参数将被忽略。原视频的相关信息可通过 getVideoInfo 获取。获取VideoContext对象之后，就可以对视频做相关操作了。保存视频到系统相册。拍摄或从手机相册中选择图片或视频。拍摄视频或从手机相册中选视频。参数：Object res。参数：Object res。参数：Object res。参数：Object res。参数：Object res。参数：Object res。

wx.savelmage ToPhotosAlbum()接口不能直接对网络图片进行保存操作，所以本例中先使用了wx.downloadFile()接口下载网络图片到本地形成临时文件。e.tempFilePath,然后再把e.tempFilePath作为wx.savelmage ToPhotosAlbum()接口的下载参数。参数：Object res。参数：Object res。参数：Object res。参数：Object res。参数：Object res。参数：Object res。保存图片到系统相册。

getRegion()接口获取图片的范围，即是经度和纬度的取值范围，取值范围是以地图的西南和东北两个顶点的经度和纬度来限定的。获取当前的地理位置、速度。map组件的两个属性longitude和latitude表示当前地图中心的经度和纬度，和当前用户所在位置的经度和纬度是不同的概念，无直接关系。本例先用wx.getLoaction()接口获取经度和纬度，再用wx.openLoaction()接口使用wx,getLocation()接口获取的经度和纬度打开位置地图。<map>为地图组件，用于地图的展示。

在函数dian中调用了wx.downloadFile()接口，下载成功，图片就会保存在res.tempFilePath中，再把res.tempFilePath设置为头像。使用前请注意阅读相关说明。下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。一个可以监听下载进度变化事件，以及取消下载任务的对象。

随着互联网的发展，传统的HTTP协议已经很难满足W©b应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。传统的HTTP协议是无状态的，每次请求(Request)都要由客户端（如浏览器）主动发起，服务端进行处理后返回Response结果。传统Web模式中客户端是主动方，服务端是被动方，服务端很难主动向客户端发送数据，对于信息变化不频繁的Wb应用来说传统模式是足够应付的。

在Web开发中，服务器可以为每个用户创建一个会话对象(session对象)，注意：一个浏览器独占一个session对象（默认情况下）。因此，在需要保存用户数据时，服务器程序可以把用户数据写到用户浏览器独占的session中，当用户使用浏览器访问其他程序时，其他程序可以从用户的session中取出该用户的数据。很多人学了JSP和PHP这些Web程序语言之后对session仍然一知半解，其实session是容器为访问者开辟的一个内存空间，在通常情况下这块内存空间将为用户保留30分钟。

wx.request()是腾讯公司封装好的一个request请求的函数，类似于其他程序语言的自带函数，开发者只需把这些内置函数复制过来使用即可，无须注意函数底层代码实现部分。最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。对于 GET 方法的数据，会将数据转换成对于 POST 方法且为的数据，会对数据进行 JSON 序列化对于 POST 方法且为的数据，会将数据转换成useHighPerformanceMode 高性能模式说明。

电商小程序中经常要用到购物车，购物车是JavaScript在小程序交互场景中的经典应用。本例实现一个简单的购物车，购物车初始状态和用户加购商品之后的购物车状态如图所示。初始购物车状态：加购之后的购物车：ddCaricon.wxml文件中“+”和“加入购物车”两个按钮绑定了点击事件。在addcart…js文件中为“+”按钮定义了事件函数addCount(),用于实现当用户点击“+”按钮时商品数量加1。为“加入购物车”按钮定义的函数addToCart(),用于实现当用户点击“加入购物车”时，一次性向购

页面布局思路：页面的上部放置<view>容器，设置为lex布局主轴在水平方向上从左向右，左边放置<viw>容器，用于增加背景色以及设置布局样式，将搜索图标、<iput>组件以及“取消”按钮放置其中；搜索框下方的“热门搜索”和“换一批”也采用flex布局方式，标题下方的标签每个元素水平向右排列并且换行，因此在外面的<view>设置为1x布局，主轴在水平方向上从左向右，并且设置允许换行显示，再利用列表渲染完成数据的显示，最终根据不同元素之间的位置关系，编写标签内部的样式代码。最后完成样式的设置。

WXSS具有CSS的大部分特性，其书写规则由两部分组成：选择和声明，如图所示。选择器(selector)：表明该样式将作用于哪些对象，这些对象可以是某个标签、指定的clss或id值等。在解析这个样式时，根据选择器来渲染对象的显示效果。属性(property):样式的选择项。text {当对一个文档进行布局(layout)时，浏览器的渲染引擎会根据标准之一的CSS基础盒子模型(CSS basic box model),将所有元素表示为一个个矩形的盒子。

小程序使用的地图来自腾讯地图，地图组件为用户提供视角中心点地位、缩放层级的设置、标记物的增加以及内部组件的事件绑定，其属性如表所示。<image>为图片组件，常用于浏览图片，通过设置属性mode能够对图片进行裁剪和缩放，共有14种模式，其中5种是缩放模式，9种是裁剪模式，其属性如表所示。<video>为视频组件，用于播放本地或网络的视频资源，视频的默认宽度为300px、高度为225px,视频组件提供弹幕功能，其属性如表所示。<navigator>导航组件用于页面之间的跳转，是使用频繁的组件之一。

组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。官方文档语法格式如下：小程序组件通用属性：视图容器(View Container)组件用于排版页面为其他组件提供载体。view容器是页面中最基本的容器组件，通过高度和宽度来定义容器大小。<view>相当于HTML中的

这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。存放在数据缓存里面，可以被多个页面使用，直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中，除非清楚数据缓存或者删除小程序否则一直存在。存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；通过存储到数据缓存中。

使用 name 属性，作为模板的名字。

逻辑层是事务逻辑处理的地方。对于小程序而言，逻辑层就是.js脚本文件的集合。逻辑层对数据进行处理后发送给视图层，同时接收视图层的事件反馈。微信小程序开发框架的逻辑层是由JavaScript编写的。在JavaScript的基础上，微信团队做了一些适当的修改，以便提高小程序的开发效率。增加App和page函数，进行程序和页面的注册。提供丰富的API,如扫一扫、支付等微信特有的功能。每个页面有独立的作用域，并提供模块化功能。逻辑层的实现就是编写各个页面的.s脚本文件。

小程序应用级生命周期页面级生命周期。当打开小程序时，首先会触发应用级生命周期函数onLaunch()进行程序的启动，完成后调用onShow()准备显示页面，当被切换进入后台会调用onHide(),直到下次程序在销毁前重新被唤起会再次调用onShow()。当小程序应用级生命周期调用完onShow()以后，就会准备触发小程序页面级生命周期，在一个页面加载显示的过程中会分别触发onLoad()onShow()onReady()函数。当页面被切换到后台，会调用页面onHide(),从后台被唤醒会调用页面。

本例中的index.js引用了app.js中的变量Info和函数add,在index.js中声明const app = getApp()语句之后，app对象即包含了app.js中所有的变量和函数，而后app.Info和app.add()即可引用到app.js中的变量Info和函数add。当开发者新建一个工程，如图所示，项目文件包括根目录下的pages文件夹和utils文件夹，以及全局文件app.js、app.json、app.wxss、project.config.json和sitemap.json。

页面<view>网络接口</view><button bindtap="handleTap">发送请求</button><view>文件下载接口</view><button bindtap="tapdownload">点击下载</button><image src="{{url}}"/><view>文件上传接口</view><view class=