uni-app打包的app,分享到line聊天界面 -- UNI_APP(六)

有关Line url 详细 用法,请参考语雀: LINE · 语雀

需求场景:在自己的app内,点击商品分享,唤起line,跳转到line聊天界面

思考:uni-app官方有uni.share api 但是不支持line,然后去插件市场搜索一番,有封装的原生插件,但是好贵呀。于是,又去问度娘,还是没有很好的答案,好吧,那就只能去看line 开发文档了。

行动: 翻墙,打开line 开发文档https://line.me/zh-hant/ 全是英文,最好经过一番摸索,终于找到了:Using LINE features with the LINE URL scheme | LINE Developers 太简单了,根本没有微信,QQ麻烦

答案:

const scheme = "https://line.me/R/msg/text/?我来了line"
plus.runtime.openURL(
    scheme,
    function(res) {
        console.log(res);
    }
);

是不是很简单,太开心了 当然也可以这样

const scheme = "https://line.me/R/nv/chat/我是line"
plus.runtime.openURL(
	scheme,
	function(res) {
	    console.log(res);
	}
);

一不小心又给公司省了500块起。

    

官网写的明明白白

最后,再来看一下实际效果,分享菜单就自制做吧,只说唤起line聊天界面,无奈,官网上传视频功能挂了,那我只能截图了

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是一个简单的领券界面示例,包括优惠券列表、领取按钮和弹窗提示: 1. 在 uni-app 中创建一个页面,比如命名为 coupon.vue。 2. 在 coupon.vue 中添加以下代码: ```html <template> <view class="container"> <view class="coupon-list"> <view class="coupon" v-for="(coupon, index) in couponList" :key="index"> <view class="coupon-info"> <view class="coupon-name">{{ coupon.name }}</view> <view class="coupon-desc">{{ coupon.desc }}</view> <view class="coupon-time">{{ coupon.time }}</view> </view> <view class="coupon-receive"> <button class="coupon-btn" @click="showPopup(index)">领取</button> </view> </view> </view> <van-popup v-model="showPopup" position="bottom"> <view class="popup-content"> <view class="popup-title">{{ currentCoupon.name }}</view> <view class="popup-desc">{{ currentCoupon.desc }}</view> <view class="popup-time">{{ currentCoupon.time }}</view> <button class="popup-btn" @click="receiveCoupon">立即领取</button> </view> </van-popup> </view> </template> <script> export default { data() { return { couponList: [ { name: '优惠券1', desc: '满100减50', time: '有效期:2021-12-31' }, { name: '优惠券2', desc: '满200减100', time: '有效期:2021-12-31' }, { name: '优惠券3', desc: '满300减150', time: '有效期:2021-12-31' } ], showPopup: false, currentCoupon: {} } }, methods: { showPopup(index) { this.currentCoupon = this.couponList[index]; this.showPopup = true; }, receiveCoupon() { // 领取优惠券的逻辑,可以通过接口请求实现 this.showPopup = false; uni.showToast({ title: '领取成功', icon: 'success' }); } } } </script> <style> .container { padding: 20rpx; } .coupon-list { margin-top: 20rpx; } .coupon { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; padding: 20rpx; border: 1px solid #eee; border-radius: 10rpx; } .coupon-info { flex: 1; margin-right: 20rpx; } .coupon-name { font-size: 36rpx; font-weight: bold; margin-bottom: 10rpx; } .coupon-desc { color: #888; font-size: 28rpx; margin-bottom: 10rpx; } .coupon-time { color: #888; font-size: 28rpx; } .coupon-receive { width: 200rpx; } .coupon-btn { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; background-color: #f44; color: #fff; border-radius: 10rpx; } .popup-content { padding: 20rpx; } .popup-title { font-size: 36rpx; font-weight: bold; margin-bottom: 10rpx; } .popup-desc { color: #888; font-size: 28rpx; margin-bottom: 10rpx; } .popup-time { color: #888; font-size: 28rpx; } .popup-btn { width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; background-color: #f44; color: #fff; border-radius: 10rpx; } </style> ``` 3. 这段代码定义了一个 coupon 组件,包含一个优惠券列表和一个弹窗提示。couponList 数组存储了三个优惠券的基本信息,showPopup 变量控制弹窗的显示和隐藏,currentCoupon 变量存储当前选中的优惠券信息。 4. 优惠券列表中的每个优惠券都可以点击领取按钮,调用 showPopup 方法弹出提示框。弹出框中展示当前优惠券的详细信息,点击立即领取按钮可以执行领取优惠券的逻辑。 5. 最后,在 coupon.vue 中引入 vant-ui 库,因为示例中用到了 vant-popup 组件。可以通过以下命令安装 vant-ui: ```bash npm install vant-weapp -S --production ``` 6. 在 coupon.vue 中引入 vant-ui: ```javascript import { Popup } from 'vant-weapp'; export default { components: { [Popup.name]: Popup }, // ... } ``` 7. 最后,运行 uni-app,即可看到一个简单的领券界面
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值