可能在开发中会发现有用户小程序带着未知场景值和“不明来源”的appid进入。这些appid在小程序码生成界面查不到，场景值文档列表里也没有。 下面总结了一点点未知的appid和场景值，因为只接触到这些，仅供参考。 appId列表 APPID 官方名称 可能场景值 备注 图例 wxb6d22f922f37b35a 大家在用 1142,1023,无 小程序的发现页 图例1 wx9d7db7620ef5e23c 内容搜索Demo 1006 新版的小程序搜索入口不是这个了，可能只有老版本的微信才会带这个appid了 官方图例,图例2 wx76222b2ffe0c7ac7 好物圈推荐 微信圈子 场景值列表 只写了官方文档里没有的 场景值 备注 图例 1142 可能是小程序发现界面 图例1

为便于小程序开发者灵活管理小程序版本，同时减少新版本出现缺陷对线上服务造成的影响，小程序开发者发布新版小程序时，可根据自身需求选择“全量发布”或“分阶段发布”。” 入口：小程序管理后台-开发管理-审核版本（已通过）-提交发布 [图片] 发布流程说明 步骤一：选择发布模式 开发者可根据自身业务需求，选择“全量发布”或“分阶段发布”。 全量发布：即时向全量微信用户发布新版小程序。 分阶段发布：新版小程序将在15天内以开发者自定义的比例，向微信用户发布更新。 [图片] 步骤二：选择发布比例 开发者可根据需求填写发布比例。发布后，将有该比例用户使用新版本小程序。 [图片] 步骤三：确认版本信息后确认分阶段发布。 [图片] 步骤四：提升发布比例/撤销分阶段发布。 提升发布比例：开发者可根据线上使用情况，逐步提升发布比例。 撤销发布：如分阶段发布中的版本出现重大问题影响线上服务，开发者可选择撤销此版本的发布。 [图片] 分阶段发布小程序相关规则 1.开发者必须在15天内全量发布/撤销发布。如开发者在首次发布后15天内未撤销发布，平台将在第15天全量发布小程序新版本。 2.开发者可递增调整分阶段发布的用户比例。开发者也可撤销分阶段发布，若撤销发布当前版本，所有用户将使用小程序上一个全量发布的线上版本。 3.若存在正在分阶段发布的小程序版本，不可发布新版本、不可回退已全量发布的线上版本。 4.小程序第一个版本必须选择“全量发布”模式发布。 5.当线上版本的上一个版本是分阶段发布并已撤销发布，那么当前线上版本不可回退。

背景 小程序插件简介小程序插件是可以被开发者添加到小程序内直接使用的，能为用户提供具体服务的功能组件。 插件开发者可像开发小程序一样开发插件，除了在自己的小程序内使用，还能提供给其他小程序直接使用。 插件使用者无需独立开发小程序内的所有服务，无需理解插件内部逻辑和实现方式，可直接使用别人开发好的插件，为用户提供相应服务。 推出小程序插件的原因小程序的初衷是希望更好地连接用户和服务。自上线以来，越来越多的商户、开发者开发自己的小程序。 早晨起来在小区电梯内，扫小程序码，即可叫个早餐外卖； 走到门口，扫共享单车的二维码，骑车即走； 到了公司，即可打开小程序轻松打卡，开始美好的一天上班生活…… 随着小程序的普及，越来越多的路边小摊、餐饮小店、夫妻店也希望接入小程序。许多商家会给我们留言： “我只会简单开发，不会做复杂的功能怎么办？” “我也想给餐馆小程序做一个预约订餐功能，要怎么搞？” “客户可以在我的小程序里查询快递信息吗？” “我没有数据，可以在小程序里做地图查找功能吗？”…… 我们总结出大家目前遇到的几个难题： 1.开发技术有限，实现复杂功能难度大 2.人力、设备、资源有限，实现服务成本高 3.缺乏某些类目的资质，如电商、打车 小程序插件的应用1.开发共享，避免重复开发 在小程序内使用插件，可免去小程序开发者重复开发，一定程度上减少了开发工作量。 如：在旅游景区的小程序可以使用地图插件，开发者无需在小程序内独立开发地图内导航、出行指引、周边服务推荐等能力，直接使用地图插件即可为用户提供导航服务，免去很大量的开发工作。 2.插件可提供针对行业的完整服务，同时覆盖线上线下 商家希望借助小程序更好地连接用户和服务，包括线上、线下服务。线下服务往往人力成本、硬件设备等要求较高，商家在小程序内提供完整服务的门槛较高。而插件不仅可以解决线下服务的问题，还能针对特定行业提供全套完整服务。 以景区服务小程序为例，使用门票购买插件，用户可在小程序内完成门票线上预订、购买等流程，在到达景区后，通过插件服务提供商提供的移动终端或硬件设备，可完成门票兑换、核销。 而对于餐饮、零售等线下行业而言，插件更是极大降低了商家的成本，商家可以使用预订、排队、外卖等插件，由插件开发者提供线下服务，商家只需在小程序内引用插件，即可使用由插件开发者提供的预订、外卖等服务，节省了成本。 3. 降低服务门槛的问题，实现“服务共享” 具有开发能力及服务资质的开发者，可将自己的服务封装成插件，提供给其他小程序使用，实现“服务共享”。 插件的技术原理插件本身的技术原理并不复杂。插件代码由一些自定义组件和 JS 代码文件构成，插件开发者在发布插件时，这些代码被上传到微信后台保存起来。 当小程序使用插件时，使用者需填写插件的 AppID 和版本号，以便从后台获取相应的插件代码。小程序代码编译时，插件代码会被嵌入到小程序中，与小程序一起编译运行。 小程序与插件的交互根据需要，插件代码可以提供 JS 接口或自定义组件供小程序调用。JS 接口可以用于界面无关的逻辑，自定义组件可以嵌入界面中展示。 对于插件使用者来说，插件的调用方法很简单。 1.使用插件 JS 接口 与普通 JS 文件间 [代码]require[代码] 的方式一样，只需要将[代码]require(FILE_NAME)[代码] 改成[代码]requirePlugin(PLUGIN_NAME)[代码] 这样的调用形式。 2.使用插件提供的自定义组件 与使用普通自定义组件的方法非常相似。在[代码]json[代码]文件的 [代码]usingComponents[代码] 段落中，按照[代码]plugin://PLUGIN_NAME/COMPONENT_NAME[代码] 的形式使用即可。 对于插件开发者而言，这里给出几点建议： 1.提供充分的接口文档和示例，方便插件使用者了解插件的使用方法； 2.注意保持插件不同版本间接口的稳定，使插件使用者能顺利升级插件； 3.计算小程序代码包大小时，插件代码也会一并计算在内，所以应当控制好插件代码的大小。 插件代码运行环境插件代码的运行环境与小程序代码有一定的区别，主要是以下两点： 1.插件可以发起网络请求的域名与小程序不同，因此插件开发者需要注意在插件后台的设置中正确配置网络请求域名。 2.插件可以调用的 API 有一定的限制，并不是所有的接口插件都可以调用，如页面跳转相关的接口是不允许插件调用的。插件开发者在使用一些特殊接口前，请查询文档中的插件可调用接口列表。 此外，目前一个小程序最多可使用5个插件，赶紧将插件用起来，节约开发者成本吧。 详情可参考《小程序插件接入指南》。

2019年上半年微信发布了基于小程序页面的搜索，为了让我们更好地发现及理解小程序的页面，结合过去一段时间来我们遇到的各种情况，我们强烈建议各位开发者花一些宝贵的时间认真阅读本文：） 爬虫访问小程序内页面时，会携带特定的 user-agent "mpcrawler" 及场景值：1129 1. 小程序里跳转的页面 (url) 可被直接打开。 小程序页面内的跳转url是我们爬虫发现页面的重要来源，且搜索引擎召回的结果页面 (url) 是必须能直接打开，不依赖上下文状态的。特别的：建议页面所需的参数都包含在url 2. 页面跳转优先采用navigator组件。 小程序提供了两种页面路由方式：   a.navigator 组件      b. 路由 API，包括 navigateTo / redirectTo / switchTab / navigateBack / reLaunch 建议使用 navigator 组件，若不得不使用API，可在爬虫访问时屏蔽针对点击设置的时间锁或变量锁。 3.清晰简洁的页面参数。 结构清晰、简洁、参数有含义的 querystring 对抓取以及后续的分析都有很大帮助，但是将 JSON 数据作为参数的方式是比较糟糕的实现。 4. 必要的时候才请求用户进行授权、登录、绑定手机号等。 建议在必须的时候才要求用户授权（比如阅读文章可以匿名，而发表评论需要留名）。 5. 我们不收录 web-view 中的任何内容。 我们暂时做不到这一点，长期来看，我们可能也做不到。 6. 利用 sitemap 配置引导爬虫抓取，同时屏蔽无搜索价值的路径。 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html 7. 设置一个清晰的标题和页面缩略图。 页面标题和缩略图对于我们理解页面和提高曝光转化有重要的作用。 通过wx.setNavigationBarTitle或 自定义转发内容onShareAppMessage对页面的标题和缩略图设置，另外也为 video、audio 组件补齐 poster /poster-for-crawler属性。 8. 使用页面路径推送能力 可极大丰富微信可以收录的内容，进而提高小程序内容的曝光机会。请参考： https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/search/search.submitPages.html

图片是放在阿里云的oss上，去掉或者加上防盗链都是一样  安卓能显示，苹果不能显示，header都为一样  image/jpeg  或者png   当苹果请求oss图片服务器时  返回302则可以看到图片  返回200则不可以看到图片  不设置防盗链  允许空白refer 没有CDN回源加速  直接硬怼图片地址  统统不能显示 多次实验改用腾讯云cos则完全一样  只是显示的图片和阿里云的就不一样   阿里云总显示5张左右   腾讯云总显示就只有3张左右 [图片] [图片]以上为安卓和苹果个两个显示 代码片段地址 https://developers.weixin.qq.com/s/fs2v11mX7Ydd

小程序代码包总包上限提升至12M为了让开发者开发出功能更丰富的小程序，小程序或小游戏代码包总包上限由8M提升到12M。建议开发者优化小程序性能并将每个分包做得尽可能小，以便提升用户的打开速度，优化用户体验。 开发者可登录开发者工具，在详情-项目配置中点击刷新按钮，获取最新的配置信息。 [图片] 内置扩展库支持扩展库是将官方提供的一系列扩展能力打包而成的一些类库。为方便开发者使用，我们在最新的nightly版开发者工具支持了内置扩展库，开发者只需在app.json配置文件声明引用指定扩展库即可，无需自行引入相关 npm 包且不计入小程序代码包大小，目前支持了kbone和WeUI两种扩展库，更多详情请参考文档。 欢迎各位开发者接入，如有问题，可在本帖下方留言或在社区发帖反馈。 微信团队   2019.11.22

如题 ： 支持负一屏 sdk 拉取小程序最近使用列表与“我的小程序” [图片] 附原文链接：https://developers.weixin.qq.com/community/develop/doc/0008e47f970a5880cf799f32c5ec01?idescene=7&op=1

因为 image 控件的图片拉取本质上是 web 上的 backgroundImage，很多时候是由于图片不规范(content-type / length / 是否302跳转等 )导致拉取不成功，最终表现为加载不出图片。关于这一块我们在持续优化中

使用wx.redirectTo进行了跳转之后左上角就出现了返回首页，该页面不是最底层页面，也能通过安卓的返回键返回到上一个界面 另外IDE是正常的 [图片]

摘要： 小程序开发技巧。 作者：小白 原文：小程序自定义单页面、全局导航栏 Fundebug经授权转载，版权归原作者所有。 需求 产品说小程序返回到首页不太方便，想添加返回首页按钮，UI说导航栏能不能设置背景图片，因为那样设计挺好看的。 [图片] 需求分析并制定方案 这产品和UI都提需求了，咱也不能反驳哈，所以开始调研，分析可行性方案；1、可以添加悬浮按钮。2、自定义导航栏。 添加悬浮按钮，是看起来是比较简单哈，但是感觉不太优雅，会占据页面的空间，体验也不太好。所以想了下第二种方案，自定义导航栏既可以实现产品的需求还可以满足UI的设计美感，在顶部空白处加上返回首页的按钮，这样和返回按钮还对称（最终如图所示，顶部导航栏是个背景图片，分两块组合起来）。 实现方案 一、实现的前提 1、首先查看文档，看文档里关于自定义导航栏是怎么规定的，有哪些限制；还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。 2、在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，只保留右上角胶囊状的按钮，如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 “navigationBarTextStyle”:“white/black” 3、还要考虑加返回按钮和返回首页的按钮，适配不同的机型 先说下两种配置方法： ①全局配置navigationStyle： 调试基础库>=1.9.0 微信客户端>=6.6.0 app.json [代码]{ "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" }, "window": { "navigationStyle": "custom" } } [代码] ②单页面配置navigationStyle 调试基础库>=2.4.3 微信客户端版本>=7.0.0 自定义的页面.json [代码]{ "window": { "navigationStyle": "default" } } { "navigationStyle": "custom", "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" } } [代码] 两者的区别就是，全局配置放在app.json文件里，单页面配置放在自定义页面配置文件里。 二、实现的步骤 以下说下几个要点： 1、自定义导航栏文本，是否显示返回，是否显示返回首页,导航栏高度 2、statusBarHeight，用来获取手机状态栏的高度，这个需要在全局app.js中的onLaunch，调用wx.getSystemInfo获取，navigationBarHeight+默认的高度，这个是设定整个导航栏的高度， 3、还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx。 4、因为自定义导航栏每个页面都要写，所以把导航栏封装了公共组件，这样只需要在每个页面引入即可。 如下是封装的导航栏组件： wxml [代码]<view class="navbar" style="{{'height: ' + navigationBarHeight}}"> <view style="{{'height: ' + statusBarHeight}}"></view> <view class='title-container'> <view class='capsule' wx:if="{{ back || home }}"> <view bindtap='back' wx:if="{{back}}"> <image src='/images/back.png'></image> </view> <view bindtap='backHome' wx:if="{{home}}"> <image src='/images/home.png'></image> </view> </view> <view class='title'>{{text}}</view> </view> </view> <view style="{{'height: ' + navigationBarHeight}};background: white;"></view> [代码] 这里有个需注意的问题，就是一般会出现自定义导航栏，下拉页面，导航栏也随着会下拉，这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight，所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度 wxss [代码].navbar { width: 100%; background-color: #1797eb; position: fixed; top: 0; left: 0; z-index: 999; } .title-container { height: 40px; display: flex; align-items: center; position: relative; } .capsule { margin-left: 10px; height: 30px; background: rgba(255, 255, 255, 0.6); border: 1px solid #fff; border-radius: 16px; display: flex; align-items: center; } .capsule > view { width: 45px; height: 60%; position: relative; .capsule > view:nth-child(2) { border-left: 1px solid #fff; } .capsule image { width: 50%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .title { color: white; position: absolute; top: 6px; left: 104px; right: 104px; height: 30px; line-height: 30px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [代码] js [代码]const app = getApp() Component({ properties: { text: { type: String, value: 'Wechat' }, back: { type: Boolean, value: false }, home: { type: Boolean, value: false } }, data: { statusBarHeight: app.globalData.statusBarHeight + 'px', navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px' }, methods: { backHome: function () { let pages = getCurrentPages() wx.navigateBack({ delta: pages.length }) }, back: function () { wx.navigateBack({ delta: 1 }) } } }) [代码] json [代码]{ "component": true, "usingComponents": {} } [代码] 最终还需要考虑下版本兼容的问题，毕竟还有一些用户，微信版本并没有更新到最新版本。 首先可以在app.js里面获取下当前用户的微信版本，做下版本比较，如果小于这个版本，设置个全局变量，也可以在组件写个方法，在不同的页面打开显示不同的顶部导航栏，或者可以控制是否显示导航栏，这里就不详细说了。 亲自试了下，在低于7.0版本的微信中，如果采用单页面自定义导航栏，会出现两个导航栏，这时候通过判断版本号不要再渲染自定义的导航栏组件了，在页面的配置文件里写上title名，还有相应的背景色，这样就会显示自带的导航栏了。 总结 小程序开发是有些坑的地方，从不支持自定义导航栏，到支持全局自定义导航栏，再到现在的支持单页面配置，可以看出在慢慢完善。还有底部tabbar，可自己选择配置的太少了，虽然也支持自定义，但是发现自定义写的底部导航组件体验并不好，每次打开页面都会重新渲染底部的按钮，如果全部写成在一个页面里的tab切换，虽然按钮每次不用重新加载了，但是业务多肯定不行，写到一个单页面里东西也太多了。 希望微信能够多添加或放开一些功能，让开发者更好的服务于产品，给用户更好的体验。

我想反馈一个Bug。在64位win7操作系统下无法启动微信web开发者工具。是Dell的笔记本电脑。 安装程序版本是wechat_devtools_1.02.1802270_x64 也尝试过其他旧版本，也尝试过32位的版本，一样无法启动。在网上查阅后，尝试过重启电脑，卸载重装开发者工具，以及在应用程序兼容性中设置以管理员身份运行该程序，但运行后可以在任务管理器中看到相关进程，却看不到任何运行的界面。 尝试直接运行安装目录中的 wechatdevtools.exe 效果跟直接启动安装目录下的微信web开发者工具差不多一样。只能在进程里看到，但是看不到运行界面。 下面是操作系统,设备管理器和任务管理器截图。谢谢各位大大来关注和解答我的问题。辛苦了。谢谢！ [图片] [图片] [图片] 谢谢各位大大来关注和解答我的问题。辛苦了。谢谢！ 谢谢微信官方小程序的大神来帮助我解决了问题。 当时大神让我使用管理员身份运行了 cmd.exe，在里面运行了命令“ netsh winsock reset  ” 然后重启电脑，再把node.exe拖入cmd.exe中运行后，就一切正常了。 重启之前，我还删除了电脑上的adsafe和火绒杀毒软件以及几个好久不用的无关软件，不知道是不是也有关系。

- 需求的场景描述（希望解决的问题） 有一些用户跟我们反馈小程序黑屏和闪退问题，我们首先怀疑是内存消耗异常导致的。找用户帮忙测试了，在确认手机可用内存大于2G的情况下测试（我们的小程序内存正常使用范围在200M~500M之间），仍然有问题，于是进一步怀疑小程序在用户的手机上内存消耗存在异常（消耗了过大的内存），然后为了确认，我们需要给用户开通开发版权限，然后教用户怎么打开“性能监控面板”，再教用户怎么录屏…… 我们的用户年龄偏大，对手机的使用不像年轻人那么熟练，学习成本非常高，尽管很多用户很友好很有耐心配合我们，但是花的时间太长，对我们和用户都是一个不小的负担。如果有API能够直接获取内存使用情况，我们直接代码里监控就行了，顶多让用户提交一下意见反馈把日志上传上来。 - 希望提供的能力 希望提供一个API，能够获取到小程序当前的内存（RAM）使用情况，以便于我们分析定位黑屏、闪退问题是否和内存有关。 只要安卓系统有这个接口可用就行，目前我们出问题的主要是安卓机。

您好： 看到咱们【微信公开课】发布了【重磅|小程序可以实现AR效果了】。作者说【小程序向品牌商户、AR引擎服务商正式开放AR接入】 请问什么条件才能成为你们说的品牌商户或者AR引擎服务商。在哪里进行申请？

如题

AR扫描识别某个物体再进入页面

请问一下，我现在使用的是云开发。 想接入一个腾讯AI的API，但是找到的相关回答都不是采用云开发，或者是采用PHP等。 那么，用微信小程序怎么样去接入https://ai.qq.com/这些API呢？有没有demo或者代码片段提供参考，谢谢了。

问题描述： 使用官方websocketAPI后，在ios手机上运行没有问题，但是在微信7.0.4和7.0.5版本部分安卓真机上建立websocket连接后可以进入success回调，但是会自动断开连接，报socket error: {errMsg: "exception onOpen fail code:20, msg:Invalid HTTP status."}错误或等待一段时间报socket error: {errMsg: "connect response time out"}错误。 部分机型： 红米5 plus（android8.1.0） 华为荣耀note10（android9） 华为mate 10（android8.1.0） vivo Z5x（andorid9） 现象描述： 红米5 plus、华为荣耀note10，调用wx.connectSocket建立连接，可进入success回调，然后监听到onSocketError，报socket error: {errMsg: "exception onOpen fail code:20, msg:Invalid HTTP status."}错误。 vivo Z5x、华为mate 10，调用wx.connectSocket建立连接，可进入success回调，过大约60秒后报socket error: {errMsg: "connect response time out"}错误。

- 需求的场景描述（希望解决的问题） 系统中用到消息推送功能，比如通知公告、审批、预警等场景 - 希望提供的能力 能够提供消息推送功能，权限可以放给用户

ios下的小程序能否支持webp格式图片呢，能很好的提升用户体验啊

一、 从前端技术演进看前端发展野心 前端的技术近几年发展非常迅速，各种框架也如同雨后春笋。 从两个维度去分析前端的技术发展，一个维度是前端复杂度，具体来讲就是前端在解决创建应用复杂度方面做的一些事情；另一个是从广度层面看前端做的事情， 这两个维度构成了一个类似于二维平面的时间事件平面。 [图片] 1. 逐渐降低创建应用复杂度 单看复杂度，前端最开始的阶段只有HTML、JS、CSS，应用虽然是非常简单的，开发起来却是非常复杂的，因此，单单只是DOM操作方面就有大量的DOM操作API。为了降低操作成本，就出现了DOM操作框架，比如jquery。这个阶段类似于从原始的刀耕火种进入石器时代。对dom的操作带来了很大的便利性。尽管如此，真正在构建一个复杂应用的时候，因为业务逻辑和手动操作dom逻辑交织在一起，应用维护变得越来越难。 下一个阶段，引入了MVC分层思想，比如backbone,这能够将逻辑梳理的更加清晰一些。不过，MVC还是需要去关注视图层的。 接着，就出现了mvvm框架，开发者不需要再关注视图层的更新，只需要关注逻辑层、数据层。这一点为构建复杂大型app提供了极大的便利性。mvvm从Angular到现在react、vue的广泛应用，前端在逻辑构建层面发展已经到了一个新的阶段。 在构建大型应用的时候，仅有逻辑层是不行的，还缺乏工程性的思想。因此，出现了打包的模式，帮助我们构建更复杂的应用。这样我们所能做的APP复杂度是一个指数型的增长。 为了进一步提高可构建应用的复杂度、增强前端的性能，assembly技术标准出现，提供了前端字节码的标准，为创建更加复杂的应用打好了坚实的基础。 2. 一直在扩展的前端广度 刚开始只能在浏览器上运行，后来有了node代码，可以让我们的代码扩展到服务器端。紧接着PC端有electron。再到移动端有RN框架，支持我们向移动端进展。 现在出现了小程序，小程序框架能够让前端继续在移动端轻应用做探索。 这里没有讲到的嵌入式开发，这方面也有相应的解决方案。 前端不断扩展广度，把前面的边界不断扩大。 最终前端想一统天下，把前端全栈化。 二、 同时满足技术需求和商业需求的前端全栈 所有的技术在发展时期都有两条线去支撑着它发展，一条线是技术需求，即技术层面的技术创意和技术诉求；另外一条线是商业需求，即技术要满足对应的商业诉求。 [图片] 一个解决方案只有同时满足商业诉求和技术需求，才能蓬勃的发展。如果偏离这两条线，就很难发展起来。举个例子，比如Symbian，有些人有想尝试这个技术诉求，但是因为它已经脱离商业需求的层面，所以这个技术会慢慢被淘汰掉。 那么，如果仅有商业需求又会出现怎样的情况呢？ 比如，2000年的时候对AI有商业上的需求，但是技术需求并满足，当时AI就是一个要被搁置的东西。 前端全栈，是怎样在满足技术需求的同时满足商业需求的呢？ 我们回归到移动端APP的开发实际场景，只有两个层面：一个是UI交互界面的开发，这个是可以被用户感知到的，另外一个是用户感受不到的服务逻辑层面。如果来看现有的开发模式，单单从UI交互界面上来看，就有不同的平台端android、ios、h5，对应的语言有Java、OC、swift、js等几种语言，后端的语言和技术实现是更多的。在现在的模式下，一个小型公司如果需要开发一个完整的APP项目，就需要六种技术！ [图片] 每一种技术如果需要找一个专门的人来做，这就需要6个人。那么反映到公司企业运营上面，人力成本是比较高的，除了人力成本还有同样非常高的沟通成本。从沟通的角度上来看，全栈式开发模式的出现，能够让一个人负责更多的业务开发，降低沟通成本。 由此可见，前端全栈既满足技术需求，也满足商业需求的，所以我相信未来前端全栈一定会蓬勃发展。 三、 打破物理隔离，实现真全栈 再回过头看前端散落的各种技术，在这个发展的过程中，有一个很深的隔离，这个隔离本质上就是物理隔离，比如前端和后端，存在手机和服务器之间的物理隔离。 [图片] **因为各种端是实体端，每个端之间都存在物理隔离。**就比如前端和后端，存在手机和服务器之间的物理隔离。如果能解决这些隔离，就可以把前端的技术做到真正的统一开发模式，才能做到真全栈开发。 [图片] 其实后端的物理隔离，比如每台服务器之间的物理隔离，可以通过云端化，我们把代码上传到云端平台，云端平台会屏蔽机器之间的物理隔离，暴露给开发者的只有一个集群的概念，而不是一台机器一台机器管理部署。云端化之后，后端的物理隔离被消除了。 我们现在的前端代码和服务器之间终存在一个物理隔离，目前的解决方案是通过中间的协议打破物理隔离，比如http协议，但http协议毕竟是中间协议。 而serverless的理念就能完完全全解决掉这层物理隔离，因为代码即服务，serverless能打破这层隔离实现前端的真全栈。 Serverless中的FaaS，函数即服务，我在使用后端服务的时候，不再关心后端的ip地址，后端的域名是什么样的，直接调用函数即可，对前端来说，后端服务是一个函数，函数就是前端的代码的一部分，后端服务和前端完全的融合在一种代码体系里去了，这样后端的服务即是一个函数，至于这个函数是在前端实现，或者是在后端很远的地方实现，开发者都可以不用关心。所以说，severless打破了物理隔离。开发者不再去做任何隔离中间层的事前，我只需要关心函数的实现就可以了，函数也是用我的前端代码来写，所以达到了充分融合的定义。 回过来看具体的实现场景，比如云开发，整个小程序的前后端逻辑都能在一个IDE里面完成，用户其实完全不用担心哪些是服务器的逻辑，他们都去向了哪里，只需要像前端函数一样去理解就可以了。云函数现在也支持了本地调试，就像前端代码一样调试，所以可以做真正的前端全栈技术开发，这对现有的开发模式是一个很大的革新。 四、 小程序云服务的发展优化 那么，在大前端技术发展的这波浪潮里面，小程序云服务又有什么样的发展呢？ 早在2017年初小程序正式发布的时候，第一代腾讯云小程序云服务就已经诞生了，但随着8月份全面向个人开发者开放，我们发现这套支服务还是有一定门槛的。于是就开始着手去做更深度的云服务整合和优化，才有了后来的wafer2 和现在的云开发。 [图片] 早期第一代产品 Wafer 的整个开发部署流程，统计了一下大概需要十几步，对许多中长尾的客户来说并不是那么友好。于是我们开始着手优化。 **通过整个优化，可以简略成四步。**第一步是通过一键的配置购买就能把云开发产品开通起来，第二步是工程师进行小程序的前后台开发，第三步进行代码的预览上传，测试体验完，最后便是发布。经过我们这一两年的努力，小程序开发的流程已经由十几步简化到四步了。目前如果从市面上来看，我们这个产品在用户体验以及流程简化度上，在行业内是较为领先的。 [图片] [图片] [图片] 那么，我们腾讯云团队和微信团队如何一步一步优化我们的产品，将产品的接入门槛降低、流程变简的呢？ [图片] 最初我们看到的是可以将 devops 的部份环节给优化一下，包括代码上传部署。这就催生了后来的Wafer 2，亦即第二代的小程序云服务产品。 另外开通购买步骤也是比较繁琐的。将腾讯云和小程序的账号打通后，可以做到一键授权并且开通环境与服务，并且我们提供了一个免费的开发环境，这样可以让更多开发者在进来发布小程序之前，可以以更低的成本门槛用上云开发。 剩下还可以优化的就只有 SDK 引入和填写配置的环节了。 SDK 其实可以采用内置的方式，毕竟小程序的前端接口也是直接内置到运行环境的 webview里面的。但是配置这块并不太好做了。因为一直以来，小程序前端和后台的开发都是割裂的，因此整个用户的鉴权机制都是交由小程序开发者自己去处理。但为什么小程序与云服务一定是要割裂的呢，为什么不能整合到一起呢？而 Serverless 这种开发模式是前后端紧密结合的最佳粘合剂。 一般而言，请求从小程序侧发起，到云服务的后台逻辑进行鉴权处理，如果鉴权成功再调用微信公开发 API，然后再把数据返回到小程序。 [图片] 但我们稍微将整个请求链路改变一下，小程序侧的请求先通过微信的服务，认证并鉴权成功之后，再到腾讯云这边的 Serverless 服务进行逻辑的处理，处理完毕后再返回到小程序侧。这样，我们把整个配置和鉴权服务都帮用户完成了，这又大大减轻了开发者的负担。 [图片] 通过介绍整个小程序云服务的优化历程，相信大家能感悟到整个产品的理念，就是希望一方面云能力逐步成为小程序开发的基础能力，另一方面也希望尽量减少开发者需要理解的概念。 五、 从前端开发到全栈开发 在云开发模式的推动下，我们开发模式是怎么一步步走到现在的开发模式的？ 在Web刚出现的时候，后台开发本就是大包大揽，后台逻辑完成后，再把模板和数据吐出来到浏览器渲染。当时基本上都是做一些比较简单的Web应用。但是当时没有人会吐槽你的后台工程师只有一个人，怎么都把后台和前端服务都干完了，可能当时的业务逻辑并不是很复杂，前端技术也不是那么的规范化，应用场景不是那么多，所以才出现这样的情况。 可是到后来，随着浏览器逐步发展，JS、CSS、HTML有一个规范委员会帮它每年制定一些新的特性。而且随着业务场景越来越复杂，这种情况下开始提出前后端分离，开始要求后台和前端是分开两个人做事情，前后两端是通过API的请求和返回去做一个数据交互。 再到了2008年的时候，乔老爷子凭一己之力开启了移动端的开发生态。到了2017年张小龙大神也跟微信团队推出了小程序且打造了小程序生态。这个时候很多专家提出了“大前端”的概念，希望只写一份代码，就是编译并完成不同客户端的业务，这些端只需要共享一个后台服务就可以了。 这个时代国外出现了一些跨端方案，比如React Native，国内也涌现了 Taro， Omi 等优秀的跨端方案。这几个时期的前端职能是有明显扩张的。 [图片] 只做了大前端完全满足不了前端的野心，随着Node.js的发展，有一些中台的服务，比如同构渲染和业务接口但逐步转给Node.js 来做。后台的同事开始专注于去写一些后台的调度服务或者优化整个数据的读取性能。这个时期，前端开发者也开始从前端逐步往后台做一个拓展。 [图片] 但大前端的步伐远远不只于此，在很多业务场景里面，前端工程师比较贴近客户，所以他更能够去理解到一些业务逻辑，无论是业务的前台或是后台，交给前端工程师来做是更好的。举个例子，云开发的其中一个客户是唯品会的前端团队。他们其中有个业务需要依靠后台来支持，但他们的后台人力很紧缺没有办法马上投入支持。于是他们的前端就借助云开发，投入1个前端工程师就迅速把这个业务给做完上线了。其实许多公司的业务都有类似的情况，公司业务发展非常快，但有的时候要前端等待后台的人力，这样就影响到整个公司的业务发展。 [图片] 可是前端的全栈开发的模式，从前端到后台，把所有的业务全都写完了，其实你会发现又回到我们最初的一个工程师大包大揽的做事情。可是这个业务是复杂的，如果没有一个工具或者一个云的基建设施去支撑这个梦想的话，其实是完全不能实现的。 面对这样的挑战，我们应该怎么答复我们的老板呢？ 腾讯云目前提供的解决方案就是云开发。 [图片] 传统开发模式会让前端变成大包大揽地做业务，其实是相当困难的，因为一方面要开发前端和后端的逻辑，还要处理所有的运维的事情，靠一个人是不可能的，所以才有了现在这样的传统分工模式，就是前端、后台、运维。如果把这个业务用上云开发的话，我们主要关心的只有一小部分，主要都是我们的业务逻辑。至少只要这个工程师能够懂Node.js，基本上就可以把服务稳定、性能卓越和有一定安全性的小程序应用独立开发出来。 云开发的开发模式真正可以实现前端工程师全栈开发的理想模式。

为了便于用户便捷使用App、网站、移动端网页、小程序的服务，微信提供不同的技术方案，便于开发者在不同终端平台的服务中接入微信登录。 通过这个教程，开发者可以了解平台提供的针对各终端平台的微信登录能力，并可以根据实际使用场景合理选择接入方式。 以下为几类型微信登录的功能说明： 类型授权域/接口 用户侧使用流程 接入流程 App 接入微信SDK，并调用snsapi_userinfo （1）在App内选择使用微信登录 （2）拉起微信客户端，打开用户授权页，完成登录授权（1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【App移动应用】并审核通过后可以使用，查看开发文档网站应用 snsapi_login （1）用户使用微信“扫一扫”，在PC端扫码 （2）客户端打开授权页，完成登录授权 （1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【网站应用】并审核通过后可以使用，查看开发文档 微信客户端内H5使用公众号的登录能力： snsapi_base snsapi_userinfosnsapi_base：静默授权 snsapi_userinfo： （1）用户在H5内点击登录，唤起授权弹窗 （2）用户侧完成登录授权（1）注册微信公众号，选择“服务号”类型，并完成微信认证 （2）在公众号管理后台设置回调域名 （3）接入微信登录能力，查看开发文档 小程序wx.login wx.getUserInfowx.login：静默授权，开发者可获取openid wx.getUserInfo： （1）用户在小程序内点击组件，唤起登录窗口（2）用户侧完成登录授权 （1）注册小程序 （2）接入微信登录功能，查看开发文档，查看登录流程设计指引 开发者在不同使用场景下接入微信登录，应该注册符合要求的帐号并使用对应的登录能力。 【常见问题】 Q1： 在调用微信登录时，出现了“此帐号并没有这些scope的权限，错误码：10005”，是什么原因？ A：对于场景与帐号属性、能力项不对应时（如在移动端网页中使用网站应用的AppID调用登录能力），将会出现以下的错误提示：此帐号并没有这些scope的权限，错误码：10005 [图片] Q2：我的服务同时有App、官网、公众号、小程序，那我怎么打通用户数据？ A：对于多平台的服务，若开发者希望能识别用户身份，例如：希望用户在小程序内也能查看到在App内购买的商品订单，则可以通过平台提供的UnionID机制来实现用户身份识别。