小程序点击跳转外部页面

1.index.wxml  添加点击事件   标签可以是小程序支持的

<!-- 邀请好友 -->
<cover-image src='/img/invitation.png' class='img-invitation' bindtap='invitation'></cover-image>

2.index.js   添加事件

invitation: function () {
var that = this;
wx.showModal({
title: '提示',
content: '请下载APP',
success(res){
if(res.confirm){
wx.navigateTo({
url: '/pages/out/out',
})
} else if (res.cancel){
console.log('用户点击取消')
}
}
})
},

注:页面跳转是  url: '/pages/out/out',   所以需要在app.json中配置

{
"pages":[
"pages/index/index",
"pages/out/out"
],
}

3.在out.wxml   添加一句话web-view标签  其中src是需要跳转的链接

 <web-view src="https://www.xiaojingxiche.com/Integral/download"></web-view>
<!-- 放心你没有看错就这么一行就行了 -->
 

这样写好之后还不算完   会提示如图

接下来需要在微信小程序后台配置业务域名

1.登录微信公众号开发平台  开发-->开发设置-->业务域名

需要下载校检文件上传至服务器指定目录,进行保存.校验文件 ###.txt 文件下载.上传到域名根目录.点击保存即可.

保存完成即可,完成之后可以在微信开发者工具中查看到即配置成功

小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名的更多相关文章

  1. [Vue] vue跳转外部链接

    问题 vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 w ...

  2. 程序员的又一春,微信小程序带来的一个赚钱机遇

    微信小程序可能是原生的机遇,在程序员面对微信小程序的恐惧中说其实也是我们程序员创业的春天或者挣外快的一个机遇. 为什么这么说呢?且听我慢慢给你分析 成本角度 你想想,会ios开发的可能只会ios,会安 ...

  3. 微信小程序详细图文教程-10分钟完成微信小程序开发部署发布

    很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现 ...

  4. 微信小微商户申请入驻 .NET C#实现微信小微商户进件API

    微信小微商户申请入驻 .NET C#实现微信小微商户进件API官方小微商户专属接口文档 微信支付SDK 微信支付官方SDK与DEMO下载 图片上传 图片上传接口API文档 证书下载 证书下载接口API ...

  5. 小程序新能力-个人开发者尝鲜微信小程序

    个人开发者的福利 微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的. 没想,网上一查, ...

  6. 微信小程序学习笔记(一)--创建微信小程序

    一.创建小程序 1.申请帐号.安装及创建小程序,请参照官方文档里面的操作 https://developers.weixin.qq.com/miniprogram/dev/. 小程序在创建的时候会要求 ...

  7. 前端微信小程序电影类仿淘票票微信小程序

    需求描述及交互分析设计思路和相关知识点电影界面顶部页签切换效果设计正在热映界面布局设计即将上映界面布局设计电影详情页设计我的界面列表导航设计登录设计 相关知识点(1)swiper滑块视图容器组件,可以 ...

  8. 小程序swiper效果高宽设置(微信小程序交流群:604788754)

    swiper的宽和高一定要设置在swiper上面.swiper-item默认继承swiper的宽和高.swiper-item容器里面的宽和高没有继承他的父节点宽和高,需要从新设置. 不明白之处,可以咨 ...

  9. AI人工客服开发 小程序智能客服 智能客服微信小程序 智能客服系统怎么做 如何设计智能客服系统

    今天我们就来给大家分享下如何做 小程序的智能客服问答系统. 首先请确保你的小程序在线客服已经开通使用,并使用代码自己对接好了,将客户的提问自动做了拦截,拦截到了你自己开发的接口上. 做好了拦截以后,我 ...

随机推荐

  1. 【BZOJ2724】【Violet 6】蒲公英

    蒲公英/分块入门九Byhzwer 辣鸡我复制粘贴题面格式极其丑陋,各位看原题面啦. [题目描述] 在乡下的小路旁种着许多蒲公英,而我们的问题正是与这些蒲公英有关. 为了简化起见,我们把所有的蒲公英看成 ...

  2. kubeadm 生成的token过期后,集群增加节点

    通过kubeadm初始化后,都会提供node加入的token: You should now deploy a pod network to the cluster. Run "kubect ...

  3. 【Finchley】【升级变更】Spring Cloud 升级到Finchley版本后需要注意的地方

    Spring Boot 2.x 已经发布了很久,现在 Spring Cloud 也发布了 基于 Spring Boot 2.x 的 Finchley 版本,现在一起为项目做一次整体框架升级. 升级前 ...

  4. [implements] - 一个接口的使用

    4种货物,如何使用一个接口实现CRUD: package com.tansuo365.test1.service.goods; import com.tansuo365.test1.entity.Go ...

  5. Ubuntu 安装 matplotlib

    参考: ubuntu16 安装matplotlib Ubuntu 安装 matplotlib sudo apt-get install libpng-dev libfreetype6-dev pkg- ...

  6. Ubuntu 18.04版本下安装网易云音乐

    这是我迄今为止发现的最完美的解决方法,不用改任何东西,只需要安装然后打开即可,后台也有. 参考:http://archive.ubuntukylin.com:10006/ubuntukylin/poo ...

  7. C语言: 从 CodeBlocks 到 Microsoft Visual Studio 2017

    开学到现在寒假,学习了一个学期的C语言,同时也已然用了大半年的 CodeBlocks 来写 C/C++ 程序.CodeBlocks 是写 C/C++ 语言的程序最轻量的IDE(集成开发环境),在 C ...

  8. HDU 5441 Travel(并查集+统计节点个数)

    http://acm.hdu.edu.cn/showproblem.php?pid=5441 题意:给出一个图,每条边有一个距离,现在有多个询问,每个询问有一个距离值d,对于每一个询问,计算出有多少点 ...

  9. 【Java】【集合】

    [1. ]HashMap,LinkedHashMap,TreeMap对比 共同点: HashMap,LinkedHashMap,TreeMap都属于Map:Map 主要用于存储键(key)值(valu ...

  10. Educational Codeforces Round 3 D. Gadgets for dollars and pounds 二分+前缀

    D. Gadgets for dollars and pounds time limit per test 2 seconds memory limit per test 256 megabytes ...