微信小程序开发文档 第59页

开始学习本教程之前，请先确保您已经有了一定的编程基础，您可以提前通过编程实战训练进行学习。 本教程将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。查看小程序示例源码 如果你需要开发微信小游戏，你可以查看：微信小游戏开发手册文档 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。 注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序，那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。 2. 创建项目 我们需要通过开发者工具，来完成小程序创建和代码编辑。 开发者工具安装完成后，打开并使用微信扫码登录。选择创建“项目”，填入上文获取到的 AppID ，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。 为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。 项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。 3. 编写代码 创建小程序实例 点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。 下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。 app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档 //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null } }) app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。...

项目页卡主要有三大功能： 显示当前项目细节 包括图标、AppID、第三方平台名（只有第三方平台的开发小程序才会显示）、目录信息、上次提交代码的时间以及代码包大小。 基础库版本切换 开发者可以在此选择任意基础库版本，用于开发和调试旧版本兼容问题。 项目配置 ES6 转 ES5 在 0.10.101000 以及之后版本的开发工具中，会默认使用babel将开发者代码ES6语法转换为三端都能很好支持的 ES5的代码，帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。详情 需要注意的是： 为了提高代码质量，在开启ES6转换功能的情况下，默认启用 javasctipt 严格模式，请参考 “use strict” 。 压缩代码 开启此选项，开发工具在上传代码时候将会帮助开发者压缩javascript代码，减小代码包体积。 样式补全 开启此选项，开发工具会自动检测并补全缺失样式，保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。 代码保护 开启此选项，开发者工具会尝试对项目代码进行保护，主要是对文件进行扁平化处理并替换 require 引用的文件名，以下情况不适合使用此功能 对于小程序只有简单页面的情况下，开启此功能效果不佳 有文件超过 500kb，且其中有使用 require 引用项目中的文件的情况，在运行时可能会报文件没有找到 动态引用的情况，如 var a = ‘somefile.js’; require(a); 将 require 函数赋值给其他变量的情况，如 var a = require; a(‘somefile.js’); 将 require 作为二元运算符的参数的情况，如 require + 1; 使用 … 运算符且未开启 ES6 转 ES5 的情况 不校验请求域名及 TLS 版本 正式发布的小程序的网络请求是需要校验合法域名以及域名的 TLS 版本，可以在 mp 管理后台进行配置。 在开发过程中可以开启此选项，开发工具将不会校验安全域名，以及 TLS 版本，帮助在开发过程中更方便的完成调试工作。 启用多核心编译 在四核及以上的电脑上此选项可见。启用此选项，会充分利用 CPU 资源来编译项目的 JS 代码，提高编译的效率。可以选择关闭此选项。 域名信息 将显示小程序的安全域名信息，合法域名可在 mp 管理后台进行设置。

程序调试主要有三大功能区：模拟器、调试工具和小程序操作区 模拟器 模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。 编译代码 点击工具左下角的编译按钮或者使用快捷键 Ctrl(Command) + B，可以编译当前代码，并自动刷新模拟器。 同时为了帮助开发者调试具体页面或者进入的场景值，如同，开发者可以选择自定义编译模式。 自定义预处理 在项目设置页卡，我们提供了以下几个默认的预处理，可以解决大部分的代码文件预处理的问题 ES6 转 ES5（可以应用于编译、预览、上传），使用 “babel-core”: “^6.26.0” 上传代码时样式自动补全，使用 “postcss”: “^6.0.1” 上传代码时自动压缩，使用 “uglify-js”: “3.0.27” 对于高级开发者来说，完全可以自己编写自动化构建脚本对代码文件进行预处理，所以我们提供了 启用自定义处理命令 选项 开发者可以指定 编译前/预览前/上传前 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令，并在控制台中输出命令的执行日志 预处理命令的执行顺序 自定义预处理命令 默认预处理命令 编译/预览/上传 注： 编译前预处理命令，需要手动点击 “编译” 按钮，或者使用快捷键编译才能触发。文件修改无法触发该命令。 Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量，才能正常执行命令。 调试工具 调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor Wxml Panel Wxml Panel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。 Sources panel Sources panel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。 Network panel Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况 注：uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看 Appdata panel Appdata panel 用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。 Storage panel Storage panel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。 Console Pannel Console Pannel 有两大功能： 开发者可以在此输入和调试代码 小程序的错误输出，会显示在此处 Sensor panel Sensor panel 有两大功能：...

Windows 仅支持 Windows 7 及以上版本 # 稳定版 Stable Build (1.05.2103190) 测试版缺陷收敛后转为稳定版 Windows 64 、 Windows 32 、 macOS # 预发布版 RC Build (1.05.2103051) 预发布版，包含大的特性；通过内部测试，稳定性尚可 Windows 64 、 Windows 32 、 macOS # 开发版 Nightly Build (1.05.2103262) 日常构建版本(基于 NW.js 0.49.3) ，用于尽快修复缺陷和敏捷上线小的特性；开发自测验证，稳定性欠佳, Windows 64、Windows 32、macOS

# 稳定版 Stable Build 更新日志 # 1.05.2103190 Windows 64 、 Windows 32 、 macOS # 2021.03.19 A 新增 云函数本地调试支持模拟环境变量 A 新增 云开发云托管消息推送 A 新增 公众号网页开发支持音频标签 A 新增 公众号网页调试支持横屏 A 新增 wx.request 支持使用 enableHttp2 参数 A 新增 可视化编辑增加组件面板 A 新增 调试菜单增加打开工具调试相关文件快捷操作 A 新增 支持 getUserProfile 接口的交互 U 优化 公众号网页调试窗口支持自定义标题栏 U 优化 二次编译 JSON 文件的速度 U 优化 新建云开发项目体验优化 U 优化 sitemap 文件的检测方式 U 优化 背景音频支持倍速设置 playbackRate U 优化 调试器 js context appservice 展示改为非红色 U 优化 调试器 sources 面板默认自动展开当前 instanceframe 内的代码目录 U 优化 10MB以上代码包采用异步方式上传 U 优化 模拟器更多功能半屏弹窗，横屏时对齐客户端样式 F 修复 分包插件页无法引用分包组件的问题 F 修复 小游戏模拟器分离窗口显示不全的问题 F 修复 调试器 sensor 面板重力模拟无法使用的问题 F 修复 WeappApplication 目录下 Temp 文件占满磁盘问题 F 修复 二维码编译打不开的问题 F 修复 无手机号小程序无法开通云开发的问题 F 修复 多项目窗口切换登录用户后没有同步头像等状态 F 修复 代码片段分享失败的问题 F 修复 模拟器网络设为 offline，WebSocket 依然能通信的问题 F 修复...

# rich-text 基础库 1.4.0 开始支持，低版本需做兼容处理。 富文本。 属性 类型 默认值 必填 说明 最低版本 nodes array/string [] 否 节点列表/HTML String 1.4.0 space string 否 显示连续空格 2.4.1 space 的合法值 值 说明 最低版本 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小 # nodes 现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node* 属性 说明 类型 必填 备注 name 标签名 string 是 支持部分受信任的 HTML 节点 attrs 属性 object 否 支持部分受信任的属性，遵循 Pascal 命名法 children 子节点列表 array 否 结构和 nodes 一致 文本节点：type = text* 属性 说明 类型 必填 备注 text 文本 string 是 支持entities # 受信任的HTML节点及属性 全局支持class和style属性，不支持id属性。 节点 属性 a abbr address article aside b bdi bdo dir big blockquote br caption center cite code col span，width colgroup span，width dd del div dl dt em fieldset font footer h1 h2 h3 h4 h5 h6 header hr i img...

# textarea 基础库 1.0.0 开始支持，低版本需做兼容处理。 多行输入框。该组件是原生组件，使用时请注意相关限制。 属性 类型 默认值 必填 说明 最低版本 value string 否 输入框的内容 1.0.0 placeholder string 否 输入框为空时占位符 1.0.0 placeholder-style string 否 指定 placeholder 的样式，目前仅支持color,font-size和font-weight 1.0.0 placeholder-class string textarea-placeholder 否 指定 placeholder 的样式类 1.0.0 disabled boolean false 否 是否禁用 1.0.0 maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度 1.0.0 auto-focus boolean false 否 自动聚焦，拉起键盘。 1.0.0 focus boolean false 否 获取焦点 1.0.0 auto-height boolean false 否 是否自动增高，设置auto-height时，style.height不生效 1.0.0 fixed boolean false 否 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true 1.0.0 cursor-spacing number 0 否 指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 1.0.0 cursor number -1 否 指定focus时的光标位置 1.5.0 show-confirm-bar boolean true 否 是否显示键盘上方带有”完成“按钮那一栏 1.6.0 selection-start number -1 否 光标起始位置，自动聚集时有效，需与selection-end搭配使用 1.9.0 selection-end number -1 否 光标结束位置，自动聚集时有效，需与selection-start搭配使用 1.9.0 adjust-position boolean true 否 键盘弹起时，是否自动上推页面 1.9.90 hold-keyboard boolean...

【小程序直播】直播间管理接口 名称 功能说明 创建直播间 该接口可直接创建直播间，创建成功后直播间将在直播间列表展示 获取直播房间列表 该接口可获取直播房间列表 获取直播间回放 该接口可在直播结束后拿到回放源视频 直播间导入商品 调用此接口往指定直播间导入已入库的商品 一、简介 直播间管理接口，是小程序直播提供给开发者对直播房间进行批量操作的接口能力。 开发者可以创建直播间、获取直播间信息、获取直播间回放以及往直播间导入商品。 二、接口文档 1.创建直播间 接口说明： 调用此接口创建直播间，创建成功后将在直播间列表展示 调用频率 调用额度：10000次/一天 请求方式 POST 请求URL https://api.weixin.qq.com/wxaapi/broadcast/room/create?access_token= 请求参数示例： json { name: "测试直播房间1", // 房间名字 coverImg: "", // 通过 uploadfile 上传，填写 mediaID startTime: 1588237130, // 开始时间 endTime: 1588237130 , // 结束时间 anchorName: "zefzhang1", // 主播昵称 anchorWechat: "WxgQiao_04", // 主播微信号 shareImg: "" , //通过 uploadfile 上传，填写 mediaID type: 1 , // 直播类型，1 推流 0 手机直播 screenType: 0, // 1：横屏 0：竖屏 closeLike: 0 , // 是否 关闭点赞 1 关闭 closeGoods: 0, // 是否 关闭商品货架，1：关闭 closeComment: 0 // 是否开启评论，1：关闭 } 请求参数含义 参数 类型 必填 说明 name String 是 直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符 coverImg String 是 背景图，填入mediaID（mediaID获取后，三天内有效）；图片mediaID的获取，请参考以下文档： https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/New_temporary_materials.html；直播间背景图，图片规则：建议像素1080*1920，大小不超过2M startTime Number 是 直播计划开始时间（开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后） endTime Number 是 直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时） anchorName String...

体验评分是一项给小程序的体验好坏打分的功能，它会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。 运行环境要求 下载并安装 1.02.1808300 或以上版本的开发者工具，下载地址。 基础库需要切到 2.2.0 或以上版本。 使用流程 1. 打开开发者工具，在详情里切换基础库到 2.2.0 或以上版本。  2. 在调试器区域切换到 Audits 面板。  3. 点击”开始“按钮，然后自行操作小程序界面，运行过的页面就会被“体验评分”检测到。 4. 点击 “停止” 则结束检测，在当前面板显示相应的检测报告，开发者可根据报告中的建议对相应功能进行优化。  5. 如需再次运行体验评分，可点击报告上方的“清空体验评分”恢复初始状态。请注意，目前系统不提供报告存储服务，一旦清空体验评分，将无法再查看本次评分结果。 自动运行 为了方便开发者能够及时发现小程序的体验问题，从开发者工具 1.02.1811150 版本起支持体验评分的 “自动运行” 功能。 该功能会在开发调试小程序时，实时检查，一旦发现体验分数低于 70 分时，系统会在 console 面板打印一个 warning 信息提示开发者，此时开发者可以切到 Audits 面板查看详情。 开发者在工具的右上角 “详情” 面板的 本地设置 中勾选 “自动运行体验评分” 选项即可开启。 评分规则 具体的评分细则和详情的规则说明可参考下列文档： 评分方法 性能 体验 最佳实践

全局配置 小程序根目录下的 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/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 完整配置项说明请参考小程序全局配置 页面配置 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 完整配置项说明请参考小程序页面配置 例如： { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }