AppID：wx05b683ac5e374894 问题类型：（Bug ） 框架类型：（小程序） 终端类型：（工具） 基础库版本：（2.2.3） 代码片段：（） [图片] 云函数端 调用nodejs 的 request库 无法获取get 请求的返回值 加载成功 但是无法获取返回值 [图片] 我在本地测试是成功 可以返回OK

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html 这里只是说了怎么引入包，可是应该怎么使用啊？ 开发者工具是开发体验版0422

你好，我用swiper 实现轮播图 swiper圆角 图片滑动的时候会先变成直角然后变成圆角，怎么解决？

需求描述 小程序目前的主要能力还都在小程序端实现，但是我们在进行开发的小程序不可能只有小程序端能力，我们也会有一些管理端能力。比如说，当用户在小程序中提交了消息以后，我们的小程序应该可以通知到小程序的管理员，以便让管理员进行下一步操作。 解决方案 架构说明 由于小程序本身不支持长久性的消息通知能力，因此，我们可以考虑借助一些第三方的服务和能力，来完成我们自己的需求。 这个需求很适合使用小程序新发布的长期订阅消息能力，但是目前该能力开放的类目还不足以支持我们的需要。 一般而言，使用短信是我们目前到达率比较高的能力，且更为普遍的能力，其他通道的能力大多受限或不符合国情，为了确保通知信息的到达率，我们这篇文章就使用短信来完成需求。 架构图示 [图片] 具体操作 1. 开通腾讯云短信服务并获取配置信息 我们想要发送短信，就需要先有一个短信服务，用于发送短信，这里我们可以使用腾讯云提供的云短信服务来发送短信。 开通腾讯云短信，并创建应用 首先，你需要访问 https://console.cloud.tencent.com/smsv2 ,点击开通腾讯云·云短信。 在开通完成后，点击界面中的【添加应用】，添加一个新的短信应用，你可以根据自己的实际情况，添加短信应用的名称和简介。 [图片] 获取 AppID、App Key 添加完成后，点击你创建好的应用，进入到应用详情页,在应用的详情页中的应用信息栏目中，你可以找到 AppID 和 AppKey ，复制并保存这两个值，稍候我们会用到。 [图片] 2. 配置短信模板、短信签名 开通了腾讯云短信服务以后，我们需要去创建短信模板，以及短信签名 腾讯云短信并不是让你随意发所有的内容的，而是你需要创建一个模板，并使用特定的模板来完成短信的发送。 短信签名则是原来让收到短信的用户知道他所收到的短信来自于他的那一个服务，一般来说，设置为产品的品名。 在腾讯云控制台中，进入到【云短信】控制台 创建短信签名 首先，点击【国内短信】，进入到短信的页面，点击【创建签名】，然后在弹出的窗口中输入你的签名的具体信息，比如这里我就是以公众号【程序百晓生】来创建签名。 [图片] 签名创建完成后，你需要等待腾讯云官方的审核，审核通过以后，你添加的签名才可以被使用。 创建短信模板 创建完签名，你需要创建一个短信的正文模板，用于发送短信。 输入模板名称、短信类型，然后选择标准模板中的模板，这里我们选择“您有新的{1}订单，请注意查收！”这个模板。 除了使用标准模板，你也可以自己编写一个模板，为了方便文章撰写，这里使用标准模板。 [图片] 然后点击提交，等待审核就可以了。 3.编写云函数发送短信 在完成了基础的配置后，我们在微信开发者工具中实现一个云函数，用于调用腾讯云的短信服务，实现具体的通知。 首先，我们创建一个新的云函数，名为 [代码]notifyAdmin[代码]，意为用于通知管理员的云函数。 [图片] 然后，选择我们刚刚创建的 [代码]notifyAdmin[代码] 云函数，在函数上右击，选择【在终端中打开】，进入到控制台，并输入如下命令，安装所需的短信 SDK。 [代码]npm install --save sms-node-sdk [代码] [图片] 然后，修改云函数的 [代码]index.js[代码]，加入如下代码 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') const { SmsClient } = require('sms-node-sdk'); const AppID = 1400286810; // SDK AppID是1400开头 // 短信应用SDK AppKey ，替换为你自己的 AppKey const AppKey = 'xxxx'; // 需要发送短信的手机号码 const phoneNumber = '10000000'; // 短信模板ID，需要在短信应用中申请 const templId = 476457; // 签名，替换为你自己申请的签名 const smsSign = '程序百晓生'; // 实例化smsClient cloud.init() // 云函数入口函数 exports.main = async (event, context) => { let orderId = event.orderId; let smsClient = new SmsClient({ AppID, AppKey }); return await smsClient.init({ action: 'SmsSingleSendTemplate', data: { nationCode: '86', phoneNumber, templId: templId, params: [orderId], sign: smsSign // 签名参数未提供或者为空时，会使用默认签名发送短信 } }) } [代码] 完成代码的修改后，就可以部署你的云函数了，右键你的云函数，选择【上传并部署云函数：云端安装依赖】 4. 在小程序端触发短信 在前面我们提到，在一些特定的场景下，我们希望用户的操作可以给管理员发送消息通知。在具体的实现的时候，我们可以根据自己的实际业务需求，来设定我们的通知发送的条件，比如说，在用户支付成功后发送消息，则相关代码如下： [代码]let orderId = 'this is a orderId'; wx.requestPayment({ success:res => { console.log("User Payment Success"); // 调用云函数发送短信 wx.cloud.callFunction({ name:"notifyAdmin", data:{ orderId: orderId } }); } }) [代码] 总结 经过本次的分享，我们了解到了如何借助短信服务，实现云开发的后台通知能力，实际上，除了短信服务，你还可以借助一些其他的工具，比如邮件、企业微信机器人等能力，实现后台管理信息的推送。 明天，我们将分享如何借助通过微信发送订单消息。

您好，警告站内信无需再次申诉，如若已经整改。 整改到期后核实无违规情况将不会作出处罚，谢谢。

示例代码地址  https://github.com/s568774056/swipe.git 对于整页都是swiper的情况下。例如下面这张图： [图片] 则可以使用如下css [代码] [代码] [代码]swiper,swiper-item{[代码] [代码]   [代码][代码]height[代码][代码]: [代码][代码]100[代码][代码]vh [代码][代码]!important[代码][代码];[代码][代码]}[代码] [代码] [代码] [代码]或者 [代码] [代码] [代码] [代码][代码] [代码][代码] swiper,swiper-item{  height: calc(100vh - 75rpx) !important; } [代码][代码] [代码] [代码] 对于swiper占据部分高度的情况下。 [图片] 使用如下代码 原理为在[代码]swiper-item[代码][代码][代码]的最上面和最下面插入空view，并利用wx api获取两个之间的高度差，然后设置给[代码]swiper[代码]。   细节方面需要自己调整下。为什么小程序不把这个组件做好呢？还得自己计算- -！ <swiper class='hide' bindanimationfinish="swiperChange" style="height:{{swiper_height}};" current="{{isIndex}}">  <swiper-item wx:for="{{roomList}}" wx:for-item='room' wx:for-index="index">    <view id="start{{index}}" class='start-view'></view>    <block wx:for="{{imgUrls}}" wx:for-item='path' wx:for-index="img-index">      <image mode="aspectFill" src="{{path}}" />    </block>    <view id="end{{index}}" class='start-view'></view>  </swiper-item> </swiper> [代码][代码][代码][代码] swiper {  margin-top: 45rpx; } Page({  data: {    roomList: ['Room1', 'Room2', 'Room3'],    imgUrls: [      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'    ],    swiper_height: 0,    isIndex:0  },  onLoad: function () {    this.autoHeight();  },  changeNavBar: function (e) {    this.setData({      isIndex: e.detail    });  },  swiperChange: function (e) {    this.setData({      isIndex: e.detail.current    });    this.autoHeight();  },  autoHeight() {    let {      isIndex    } = this.data;      wx.createSelectorQuery()        .select('#end' + isIndex).boundingClientRect()        .select('#start' + isIndex).boundingClientRect().exec(rect => {          let _space = rect[0].top - rect[1].top;          _space =  _space + 'px';          this.setData({            swiper_height: _space          });        })  } }) 参考文章https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04

自定义导航栏在刚出的时候已经有很多实现方案了，但是还有大哥在问，那这里再贴下代码及原理： 首先在App.js的 onLaunch中获取当前手机机型头部状态栏的高度，单位为px，存在内存中，操作如下： [代码]onLaunch() { wx.getSystemInfo({ success: (res) => { this.globalData.statusBarHeight = res.statusBarHeight this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2) }, failure() { this.globalData.statusBarHeight = 0 this.globalData.titleBarHeight = 0 } }) } [代码] 然后需要在目录下新建个components文件夹，里面存放此次需要演示的文件 navigateTitle WXML 文件如下： [代码]<view class="navigate-container"> <view style="height:{{statusBarHeight}}px"></view> <view class="navigate-bar" style="height:{{titleBarHeight}}px"> <view class="navigate-icon"> <navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" /> <navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else /> </view> <view class="navigate-title">{{title}}</view> <view class="navigate-icon"></view> </view> </view> <view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view> [代码] WXSS文件如下： [代码].navigate-container { position: fixed; top: 0; width: 100%; z-index: 9999; background: #FFF; } .navigate-bar { width: 100%; display: flex; justify-content: space-around; } .navigate-icon { width: 100rpx; height: 100rpx; display: flex; justify-content: space-around; } .navigate-title { width: 550rpx; text-align: center; line-height: 100rpx; font-size: 34rpx; color: #3c3c3c; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /*箭头部分*/ .navigator-back { width: 36rpx; height: 36rpx; align-self: center; } .navigator-back:after { content: ''; display: block; width: 22rpx; height: 22rpx; border-right: 4rpx solid #000; border-top: 4rpx solid #000; transform: rotate(225deg); } .navigator-home { width: 56rpx; height: 56rpx; background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center; background-size: 100% 100%; align-self: center; } [代码] JS如下： [代码]var app = getApp() Component({ data: { statusBarHeight: '', titleBarHeight: '', isShowHome: false }, properties: { //属性值可以在组件使用时指定 title: { type: String, value: '青团公益' } }, pageLifetimes: { // 组件所在页面的生命周期函数 show() { let pageContext = getCurrentPages() if (pageContext.length > 1) { this.setData({ isShowHome: false }) } else { this.setData({ isShowHome: true }) } } }, attached() { this.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }) }, methods: {} }) [代码] JSON如下： [代码]{ "component": true } [代码] 如何引用？ 需要引用的页面JSON里配置： [代码]"navigationStyle": "custom", "usingComponents": { "navigate-title": "/pages/components/navigateTitle/index" } [代码] WXML [代码]<navigate-title title="青团社" /> [代码] 按上面步骤操作即可实现一个自定义的导航栏。 如何实现通栏的效果默认透明以及滚动更换title为白色背景，如下图所示: [图片] [图片] [图片] [图片] 最后代码片段如下： https://developers.weixin.qq.com/s/wi6Pglmv7s8P。 以下为收集到的社区老哥们的分享： @Yunior: 小程序顶部自定义导航组件实现原理及坑分享 @志军: 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能 @✨o0o有脾气的酸奶💤 [有点炫]自定义navigate+分包+自定义tabbar @安晓苏 分享一个自适应的自定义导航栏组件

最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图： [图片] 代码如下： wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段： https://developers.weixin.qq.com/s/nkyp64mN7fim