概述点击右上角分享朋友圈[图片] 分享到朋友圈样式[图片] 朋友圈打开样式[图片] 这个功能目前只支持Android(在IOS高版本微信支持朋友圈打开小程序能力，但不能分享)。 用户打开朋友圈分享的小程序，看到不是真正的小程序，而是原本页面的“单页模式”。 什么是“单页模式”？以下是微信官方对于“单页模式”的描述： “单页模式”下，页面顶部固定有导航栏，标题显示为当前页面 JSON 配置的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。“单页模式”默认运行的是小程序页面内容，但由于页面固定有顶部导航栏与底部操作栏，很可能会影响小程序页面的布局。因此，请开发者特别注意适配“单页模式”的页面交互，以实现流畅完整的交互体验。限制另外，“单页模式”存在着很多限制。以下是官方给出的禁用能力列表： [图片] 限制主要包括以下几点： 页面无登录态，与登录相关的接口，如 [代码]wx.login[代码] 均不可用不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面若页面包含 tabBar，tabBar 不会渲染，包括自定义 tabBar本地存储与小程序普通模式不共用这些限制，让“单页模式”只适用于内容展示，不适用于有较多交互。 配置针对“单页模式”，新增了单页模式相关配置。目前这个配置里只有一个navigationBarFit属性: [图片] navigationBarFit属性主要是针对原页面设置了自定义导航栏的情况。也就是原页面的json文件中配置了这个属性: { // ... "navigationStyle":"custom" // ... } 给大家看一下普通导航栏和自定义导航栏的区别，下图是普通导航栏页面： [图片] 下图是自定义导航栏页面，我们在原本的导航栏位置使用了banner： [图片] [代码]"navigationStyle":"custom"[代码]这个设置在“单页模式”下也会生效。前文微信官方对“单页模式”的描述有说到“顶部导航栏与底部操作栏均不支持自定义样式”。如果我们在原页面设置了自定义导航栏。那么“单页模式”样式就会变成这样： [图片] 通过设置navigationBarFit为 [代码]squeezed[代码]就可以解决这个问题: { // ... "singlePage": { "navigationBarFit": "squeezed" } // ... } 设置后的样式： [图片] 开发 接下来介绍如何在小程序中实现这个功能。 第一步在需要转发朋友圈的页面中注册用户点击右上角转发功能，这是实现转发朋友圈功能的必要满足条件。 onShareAppMessage: function () { return { title: '转发标题', path: '/pages/home/index', imageUrl: '自定义图片路径' } } 第二步注册分享朋友圈功能(从基础库 [代码]2.11.3[代码] 开始支持)： onShareTimeline: function () { return { title: '转发标题', query: 'from=pyq', imageUrl: '自定义图片路径' } } 注意，这里有个问题，分享朋友圈功能不支持自定义页面路径，意味着只能转发当前页面。如果当前页面存在较多“单页模式”限制功能，就可能让我们的页面不能按预期展示。 当页面存在限制功能时，我们存在两个方案，第一个方案，针对“单页模式”做改动，不调用那些限制的功能。第二个方案，另外写一个针对“单页模式”的页面。 这两种方案都需要能判断当前是否正处在小程序“单页模式”。 我们通过判断场景值(场景值用来描述用户进入小程序的路径)是否等于 1154 来判断当前是否正处在小程序“单页模式”。场景值可以在 [代码]App[代码] 的 [代码]onLaunch[代码] 获取。 // app.js App({ // ... onLaunch(options) { const { scene } = options; this.isSinglePage = scene === 1154; } // ... }) 我们将是否正处在“单页模式”的Boolean值放入App实例，方便全局拿到值。 接下来说说两种方案。 第一种方案，在“单页模式”不调用那些限制功能(这是一种不推荐的方案，代码耦合性太强)。举个例子: const app = getApp(); Page({ // ... onLoad() { if (!app.isSinglePage) { wx.login({ // ... }) } } // ... }) 第二种方案，针对“单页模式”另写一个页面。因为分享朋友圈功能并不支持自定义页面路径，我们只能另外写一个组件来作为“单页模式”的内容承载。 将isSinglePage放入页面的初始数据，方便在wxml中拿到： // pages/home/index.js const app = getApp(); Page({ data: { isSinglePage: app.isSinglePage, } // ... }) home-single-page就是分享到朋友圈的内容承载组件： // pages/home/index.json { // ... "usingComponents": { "home-single-page": "components/home-single-page/index" }, } 当“单页模式”时，我们展示 [代码]home-single-page[代码]组件，否则就展示普通页面内容： // pages/home/index.wxml 样式上虽然搞定了，但是在原本的生命周期中可能会调用一些限制功能，或者跑一些其它“单页模式”用不上的内容。我们得停止原本生命周期函数调用。 建议对传入Page的对象进行统一处理，当“单页模式”时，不调用原本的生命周期： // pages/home/index.js import ExtendPage from 'common/extend-page/index' const app = getApp(); ExtendPage({ data: { isSinglePage: app.isSinglePage, } // ... }) ExtendPage函数针对“单页模式”进行统一处理： // common/extend-page/index.js const app = getApp(); const PAGE_LIFE = [ 'onLoad', 'onReady', 'onShow', 'onHide', 'onError', 'onUnload', 'onResize', 'onPullDownRefresh', 'onReachBottom', 'onPageScroll' ]; export default function(option) { let newOption = {}; if(app.isSinglePage) { newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ ...option, ...newOption, }); } 在“单页模式”下，我们将原本的生命周期都停止了调用。这样就能很好的将“单页模式”下的页面和普通页面进行解耦。 如果”单页模式“页面比较复杂，需要使用生命周期。我们也可以添加 [代码]singlePageLife[代码]属性，当处在“单页模式”下，就调用 [代码]singlePageLife[代码]内的生命周期: // pages/home/index.js import ExtendPage from 'common/extend-page/index' const app = getApp(); ExtendPage({ data: { isSinglePage: app.isSinglePage, }, singlePageLife: { onLoad() { // ... }, } // ... }) // common/extend-page/index.js const app = getApp(); const PAGE_LIFE = [ 'onLoad', 'onReady', 'onShow', 'onHide', 'onError', 'onUnload', 'onResize', 'onPullDownRefresh', 'onReachBottom', 'onPageScroll' ]; export default function(option) { let newOption = {}; if(app.isSinglePage) { const { singlePageLife } = option; newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (singlePageLife[lifeKey]) { res[lifeKey] = singlePageLife[lifeKey]; } else if(option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ ...option, ...newOption, }); } 文章如有疏漏、错误欢迎批评指正。

微信团队近期对第三方基础能力进行了若干项优化，并对服务平台提供的能力及服务进行了迭代，详情可见微信第三方平台开发文档和微信服务平台，优化内容具体如下： 优化业务流程 1.第三方代注册小程序，可快速设置登录邮箱和密码 第三方平台使用快速创建小程序接口代商家创建小程序后，商家将收到设置小程序登录邮箱和密码的微信消息提醒，管理员可点击提醒前往设置，或直接搜索「小程序助手」进行邮箱密码设置。 具体操作指引详见第三方代注册小程序支持快速设置登录邮箱和密码。 2.第三方代注册小程序，支持更多类目上线 第三方调用接口快速创建小程序现已支持更多类目，以往只支持创建线下类目的小程序，目前除了境外主体的类目、内测类目、以及个别敏感类目暂不支持外，大部分类目均与“微信官方文档-小程序开放的服务类目”对齐。快速创建小程序接口-类目参考表已更新。 提高开发效率 1. 完善第三方开发文档 近期在微信开放平台上，陆续补充、完善第三方开发文档，其中数据分析、小程序直播两个接口文档已上线。 后续将继续完善、输出更多面向第三方平台的接口能力与文档。 2. 第三方平台服务器域名设置 1）提升服务器域名数量上限：Request域名、Socket域名、Uploadfile域名、Download域名、Udp域名的设置数量均最大支持200个； 2）服务器域名的每月修改次数上限，提高至50次。 3. 第三方平台业务域名设置 业务域名数量上限提升至100个。 4. 第三方平台小程序模板库数量限制 小程序模板库数量上限，从50个提升至200个。 5. 上传小程序代码时，ext.json对插件的支持 通过commit接口上传小程序代码时，可通过ext.json完成对Plugins的配置，该配置会覆盖模板中app.json中的Plugins配置。 6. 小程序直播插件在ext.json的配置优化 小程序直播插件，可直接通过Plugins进行配置；不再需要额外配置recompile:true才会生效。 7. 第三方平台调用头像修改接口的报错说明 修改头像接口的返回错误码47001，含义为“数据格式错误”。需注意，此接口入参中，x，y参数均需为字符串类型。 8. 第三方平台模板保存的优化建议 当第三方平台模板较大时，保存模板容易触发每秒30M的上传流量限制，建议开发者注意调用频率和控制模板大小。 提供更多能力 微信服务平台，是给微信公众号、小程序运营者提供优质服务的官方平台，提供小程序开发、小程序插件、接口能力等开发服务，以及直播、视频等运营内容服务。 1. 提供AI、安全、地图、内容等近50项接口、插件能力 提供来自微信团队、腾讯云、腾讯音乐在内的近30项接口、插件能力，例如OCR识别、珊瑚内容安全、人脸检测与分析等，可供开发者在开发小程序过程中使用，实现基于接口的服务能力。  [图片] 2. 提供直播、视频、图文等内容代运营服务 MCN内容服务专区现已正式对外开放，帮助合作伙伴为商家提供直播、视频、图文等内容服务，满足商家直播方案策划、达人代播、公众号代运营、图文视频制作等需求。 商家可在内容服务专区选择服务商，下单并联系合作。 想要入驻专区的机构可以查看MCN服务商入驻要求后，与平台联系。 [图片] 平台将继续与各位合作伙伴共同建设更为完善的第三方平台生态，共同创造出更多优质小程序。

我看到其他帖子里说的是 比如当前页面是：http://www.taidupa.com/wxpay/js_api_call.php 那么就必须填写支付授权目录为： http://www.taidupa.com/wxpay/ 我的支付请求是 https://ceshi.zeshukeji.com/wlbx02/wehcat/wxpay/getOpenId/31570 支付目录配置的是https://ceshi.zeshukeji.com/wlbx02/wehcat/wxpay/getOpenId/ 还是提示的当前url未注册，， [图片] 另外，文档里说的可以配置根目录，这个根目录是怎么理解的呢，有没有小伙伴做过的分享一下 [图片]

主要代码： wxml: [代码]<view class="container"> <scroll-view class="main" scroll-y> <view style="height: 100%;"></view> <map class="map" id="map" style="width: 100%; height: 200px;"></map> </scroll-view> <view class="btn">按钮</view> </view> [代码] wxss: [代码]page, .container { height: 100%; width: 100%; } .container { display: flex; flex-direction: column; } .container .main { flex: 1; } .container .btn { height: 90rpx; background: #ff5200; color: #fff; line-height: 90rpx; text-align: center; } [代码] 手机上效果图 [图片] 代码片段：https://developers.weixin.qq.com/s/A0JmrkmN7087

作为一个前端开发者来说，还做了这么多年，一直想做一套属于自己的ui框架。 前期也做了很多准备，虽然是移动跟pc的，小程序的代码虽然跟它们有所不一样，但是很多都是大同小异。这次想借这个小程序，完完全全的整理出来。定期的发布，就是为了更好的去监督自己。 先简单的介绍下我的小程序： 以下是我小程序的目录 [图片] 样式我是用stylus写的，里面也封装了各种方法。目前我的想法是通过配置，及方法去更换。 [图片] [图片] 首页 [图片] Button [图片] Form [图片] List [图片] Tab(scroll) [图片] Tag [图片] 小程序入口： [图片]

小程序不像web浏览器有cookie机制，在默认使用cookie存sessionid的机制下，后台将无法正常使用session功能，如果正确使用session呢，提供两个方案。 [代码]1、将sessionid通过url进行传递 用户每次登录成功后将生成的sessionid值使用参数回传到客户端， 客户端接到sessionid后保存到本地， 在发起网络请求的底层接口中默认自动带上sessionid=本地存储的sessionid值。 需要配合服务器一起更改，服务器后端默认使用cookie机制 2、无缝对接cookie， 将服务器的set-cookie值保存到本地，再请求的时候模拟浏览器头部信息并带上保存的cookie信息 1）保存cookie值： _XHR('login',{'code':res.code}).then(function( ret ){ ret.header["Set-Cookie"] != undefined && wx.setStorageSync("cookie", ret.header["Set-Cookie"]); }); 2）请求的时候自动带上cookie信息 var header={}; header = { 'content-type': 'application/x-www-form-urlencoded' }; var cookie = wx.getStorageSync("cookie"); if( url != 'login' && !isNull( cookie ) ){ header['cookie'] = cookie; } 将header 赋值到 request的header内 wx.request({ url: qryDomian + url + '.html', data: _data, method: 'POST', header: header, dataType:'json' ...... 第二种方案服务器无需做任务操作。[代码]

如智形火车票小程序，他应该是在page上面定位了个蓝色图层从而遮住了backgroundColor的灰白。可是我绝对定位了一个view位于page的顶部并且突出一节，并设置了page的overflow:visible。给page加margin-top能看到view突出的那截蓝色，但是用苹果真机测弹性上下拉的时候还是现实灰白的backgroundColor。请问如何解决这个问题。 PS： 因为我下面的色调是灰白的，所以backgroundColor设置成了灰白,顶部是其他色。 [图片]