Next – 第 88 页 – 微信小程序开发指南

安装开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》。

打开微信小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个微信小程序吧！

申请账号

进入微信小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的微信小程序账号。

在这个微信小程序管理平台，你可以管理你的微信小程序的权限，查看数据报表，发布微信小程序等操作。

登录微信小程序后台，我们可以在菜单 “开发”-“开发设置” 看到微信小程序的 AppID 了。

微信小程序的 AppID 相当于微信小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了微信小程序账号之后，我们需要一个工具来开发微信小程序。

体验微信小程序

开发者可使用微信客户端（6.7.2 及以上版本）扫码下方微信小程序码，体验微信小程序。

查看微信小程序示例源码

微信小程序与普通网页开发的区别

微信小程序的主要开发语言是 JavaScript。微信小程序的开发与普通的网页开发有不少相似之处，对于前端开发者来说，从网页开发迁移到微信小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发中，渲染任务和脚本任务是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在微信小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，微信小程序的逻辑层和渲染层是分开的，逻辑层运行在不同于渲染层的独立 JS 运行时中，因此并不能直接使用 DOM API 和 BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在微信小程序中是无法运行的。同时逻辑层的 JS 运行时与 NodeJS 环境也不尽相同，所以一些 NPM 的包在微信小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而微信小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的微信小程序开发者工具，微信小程序中三大运行环境也是有所区别的，如表1-1所示。

表1-1 微信小程序的运行环境

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
微信小程序开发者工具	NWJS	Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。微信小程序的开发则有所不同，需要经过申请微信小程序账号、安装微信小程序开发者工具、配置项目等等过程方可完成。

微信小程序技术发展史

微信小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。

代码清单1-1 使用 WeixinJSBridge 预览图片

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

代码1-1是一个调用微信原生组件浏览图片的JS API，相比于额外引入一个JS图片预览组件库，这种调用方式显得非常简洁和高效。

实际上，微信官方是没有对外暴露过如此调用的，此类 API 最初是提供给腾讯内部一些业务使用，很多外部开发者发现了之后，依葫芦画瓢地使用了，逐渐成为微信中网页的事实标准。2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情。

同样是调用原生的浏览图片，调用方式如代码清单1-2所示。

代码清单1-2 使用 JS-SDK 调用图片预览组件

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

JS-SDK是对之前的 WeixinJSBridge 的一个包装，以及新能力的释放，并且由对内开放转为了对所有开发者开放，在很短的时间内获得了极大的关注。从数据监控来看，绝大部分在微信内传播的移动网页都使用到了相关的接口。

JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。

以下文字引用自内部的文档（没有最终对外开放）：

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

这个设计有点类似 HTML5 的 Application Cache，但在设计上规避了一些 Application Cache的不足。

在内部测试中，我们发现离线存储能够解决一些问题，但对于一些复杂的页面依然会有白屏问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。

微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。这个问题是之前的 JS-SDK 所处理不了的，需要一个全新的系统来完成，它需要使得所有的开发者都能做到：

– 快速的加载

– 更强大的能力

– 原生的体验

– 易用且安全的微信数据开放

– 高效和简单的开发

这就是微信小程序的由来。

微信小程序简介

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序技术发展史

微信小程序并非凭空冒出来的一个概念。当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。

代码清单1-1 使用 WeixinJSBridge 预览图片

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

代码1-1是一个调用微信原生组件浏览图片的JS API，相比于额外引入一个JS图片预览组件库，这种调用方式显得非常简洁和高效。

同样是调用原生的浏览图片，调用方式如代码清单1-2所示。

代码清单1-2 使用 JS-SDK 调用图片预览组件

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

以下文字引用自内部的文档（没有最终对外开放）：

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

这个设计有点类似 HTML5 的 Application Cache，但在设计上规避了一些 Application Cache的不足。

– 快速的加载

– 更强大的能力

– 原生的体验

– 易用且安全的微信数据开放

– 高效和简单的开发

这就是微信小程序的由来。

微信小程序与普通网页开发的区别

表1-1 微信小程序的运行环境

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
微信小程序开发者工具	NWJS	Chrome WebView

体验微信小程序

开发者可使用微信客户端(6.7.2 及以上版本)扫码下方微信小程序码，体验微信小程序。

查看微信小程序示例源码

附录

一、问题反馈

1、扫码关注微信搜索开放微信公众号，了解最新官方信息。

2、遇到开发问题，请到微信开放社区进行反馈，问题模块选择“其他”，问题标题添加具体业务前缀，例如「微信搜索」、「微信圈子」。

二、运营规则

微信致力于为用户提供极致的体验，为了更好地实现这一目标，微信平台要求任何开发者均不得以任何形式实施伤害用户、平台及竞争对手的行为，期待您与我们携手共同维护平台运营秩序。包含但不限于以下方面：

提供超出服务范围的关键词来获取平台流量；
恶意SEO造成不公平竞争；
过度营销行为，恶意引导用户；
提供虚假信息/垃圾信息，造成用户损失；
从事违法或违反《微信公众平台服务协议》及相关规则的内容和行为；

鉴于以上行为均属严重违规，一经发现将根据违规程度进行严肃处理。

超级品牌专区

更多详情请查看：搜一搜「超级品牌专区」产品说明。

内容接入

一、功能介绍

内容接入是面向有优质内容的微信小程序提供一种接入微信搜索的能力。微信小程序可以通过该功能推送优质内容的页面路径、参数和结构化数据等信息，让微信搜索可以更及时地收录到微信小程序内容，推送的内容将会被用于微信搜索结果展示。

二、准入要求

同时满足以下条件的微信小程序能够获得申请内容接入资格。

开放类目范围：面向非个人主体，开放政务服务、商业服务、医疗服务、金融业、文娱、社交 6 个一级类目下的部分子类目；

一级类目	二级类目
政务服务	不限
商业服务	法律服务平台
	律所服务
	会计师事务所
	税务师事务所
医疗服务	公立医疗机构
	三级私立医疗机构
	其他私立医疗机构
	就医服务
	互联网医院
金融业	银行
	信托
	公募基金
	私募基金
	证券/期货
	证券/期货投资咨询
	新三板信息服务平台
文娱	出版物
	学术期刊
	电台
	音乐
	有声读物
	动漫
	宗教信息
	资讯广场
社交	笔记
社交	问答

注：如果微信小程序含有社区/论坛、视频广场、其他视频、股票信息服务等服务类目，本次暂不支持接入。

活跃用户数：月均日活跃用户数不低于5000、已发布上架时间超过30天；
账号状态：账号未被限制搜索，账号已完成备案；
账号属性：以提供图文资讯内容为主营业务。

三、内容质量规范

内容审核中，会关注以下几个方面：

信息价值：文章内容要符合基本事实，信息准确，能给用户带来较高的信息增益。低质量、明显由AI生成等内容会被视为信息量低的内容处理；
页面浏览体验：页面结构要层次清晰，具有可读性，核心资源可用，没有死链；
广告：不能有开屏弹窗广告，以及其他严重影响用户体验的恶劣广告；
付费内容：推送的内容需要支持免费浏览，付费内容可以提前过滤掉，或者针对搜索渠道开通免费试读；
时效性：保持内容定期更新，对于已经过期的内容，需要及时更新或推送删除信号；
合规性：要符合法律法规，不能涉及黄赌毒、暴力、恐怖主义、政治敏感、谣言、歧视性言论等违法或违规信息。

四、开通流程

满足以上条件的开发者，可以申请开通。

具体流程如下：

在“微信小程序后台-推广与搜索-微信搜一搜-运营中心-内容接入”页面中按要求提交申请，并按照“五、数据推送流程”中的指引，提交测试数据；
推送测试数据（300条），平台会根据“三、内容质量规范”中的标准进行审核评估。测试数据的内容需要与正式推送内容在内容类型、质量上保持一致；
测试数据通过后，会进入审核状态，审核通过后可以推送正式数据，正式数据在线上允许被搜索到。

五、数据推送接口

搜一搜数据推送

服务直达

微信小程序开发者通过接入搜一搜提供的各类搜索自定义模版，可以在搜索结果页前面展示部分服务信息，与搜一搜达成搜索服务直达的技术合作。

一、开放类目

为了更好地满足用户的需求，优化用户的搜索体验，搜一搜邀请提供以下服务类目的微信小程序开发者合作开展搜索服务直达技术合作。

【已过期，仅供参考】七月份计划合作类目如下（排序不分先后）

业务类型	需要提供的服务能力
景点门票预订	支持全国各个景点的门票价格查询及购买
机票购买	支持全国各航司机票查询购买
火车票购买	支持全国火车、高铁票查询购买
汽车票购买	支持全国范围内汽车车票查询购买
汽车信息查询	支持各主流汽车车型参数、售价等信息查询

【已过期，仅供参考】十二月份计划合作类目如下（排序不分先后）：

业务类型	需要提供的服务能力
企业信息查询	支持全国企业的公开信息查询
家政服务	提供全国各地的家政服务
楼盘价格查询	支持全国各地楼盘的价格查询
股价查询	支持A股、港股、美股等主流股市的股票价格查询

二、合作筛选标准

为了提高用户的搜索体验，搜一搜会在申请合作的开发者中，筛选服务质量最好的开发者进行合作对接。

指标	详细指标
数据质量	数据覆盖度
	结果精度
	数据安全性
微信小程序体验	服务质量
微信小程序体验	页面体验
合作方影响力	微信小程序规模
	行业影响力
	资质要求

2.1 指标-数据质量

开发者需要确保数据的丰富性、时效性、真实性和安全性（数据不是从其他站点获取的），具体标准如下：

数据覆盖度
指标定义：开发者提供的数据覆盖度需要在行业内处于前五的水平，不能有明显的覆盖缺失，比如地域性缺失、行业性缺失等。

结果精度
指标定义：开发者在搜索场景提供的相关信息（包括服务）的准确度。

搜一搜会抽检开发者提供的相关业务的信息数据准确度，合作方的信息数据准确度不能低于96%。

数据安全性
开发者需要保证数据的安全性，提供的数据信息真实有效，并且数据不能来自其他站点。

2.2 指标-微信小程序体验

评价维度	详细标准	标准分级-好	标准分级-中	标准分级-差
服务质量	页面简洁，服务直达	服务内容精准，使用体验顺畅	页面是聚合链接，但还能用	内容杂乱，页面聚合后不好找到服务
服务质量	加载速度	快速打开，使用流畅	中等	加载慢或无法正常打开
页面体验	无广告	✓
	Banner广告、格子广告	/	不影响服务的使用体验和流程	可能会误点广告，影响服务的使用体验和流程
	插屏广告	/	不影响服务的使用体验和流程	信息杂乱，容易误点，影响服务的使用体验和流程
	激励式广告		用户可以不看，直接关闭继续使用服务，不影响服务的使用体验和流程	强制观看，影响服务的使用体验和流程

2.3 指标-合作方影响力

微信小程序规模
为了保证用户在微信生态内的搜索体验，要求接入的开发者对应的微信小程序月均日活跃用户数不低于10000。
行业影响力
指标定义：开发者需要提供在全网行业内的排名以及基础服务情况，全网行业排名不能低于前五名。（基础服务情况包括但不限于微信小程序DAU、MAU、覆盖城市等）
资质要求
微信小程序开发者需要符合微信小程序开放的服务类目中的资质要求，并提供相应证明。微信小程序开放的服务类目。

三、合作联系

有意者请将微信小程序昵称、微信小程序appid、服务类目下的相应资质证明、行业排名举证、数据覆盖举证等相关材料发给搜一搜对接运营同学或wesearch_assistant@tencent.com。