小程序点击跳转外部页面

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. js 根据对象属性对数组进行按字母排序

    $scope.input.sort(compare('ticked','name')); var compare = function(ticked, name){ return function(a ...

  2. matlab练习程序(k-means聚类)

    聚类算法,不是分类算法. 分类算法是给一个数据,然后判断这个数据属于已分好的类中的具体哪一类. 聚类算法是给一大堆原始数据,然后通过算法将其中具有相似特征的数据聚为一类. 这里的k-means聚类,是 ...

  3. luogu P2713 罗马游戏

    思路 模拟就好 左偏树合并 并查集寻找 代码 #include <bits/stdc++.h> #define FOR(i,a,b) for(int i=a;i<=b;++i) us ...

  4. SpringBoot 整合携程Apollo配置管理中心

    携程官网对apollo的使用讲解了很多种方式的使用,但是感觉一些细节还是没讲全,特别是eureka配置中心地址的配置 这里对springboot整合apollo说一下 >SpringBoot启动 ...

  5. p3398 仓鼠找sugar (LCA+讨论)

    分情况讨论,结果是两条路径有公共点时,深度大的LCA在另一条路径上且另一条路径的两个端点至少其中一个的与深度大的LCA的LCA为那个深度大的LCA #include <cstdio> #i ...

  6. Python实现机器学习算法:感知机

    ''' 数据集:Mnist 训练集数量:60000 测试集数量:10000 ------------------------------ 运行结果: 正确率:81.72%(二分类) ''' impor ...

  7. Google advertiser api开发概述

    对象.方法和服务 AdWords API 主要供 AdWords 的高级用户使用.如果您是 AdWords 新手,或需要复习 AdWords 基本概念,请查看 AdWords 基础知识页面. 对象层级 ...

  8. ngnix简介以及如何实现负载均衡原理

    1 负载均衡 先来简单了解一下什么是负载均衡,单从字面上的意思来理解就可以解释N台服务器平均分担负载,不会因为某台服务器负载高宕机而某台服务器闲置的情况.那么负载均衡的前提就是要有多台服务器才能实现, ...

  9. npm介绍和使用

    # npm 介绍 > 概念 : node 包管理工具 > 作用 : 通过 npm 来快速下载/安装项目中依赖的包 > 查看 版本号 : npm -v     # npm 基本使用演示 ...

  10. JS快速构建数组方法

    一.常用(普通)数组的构建 1.1 直接构建 let arr = ['mock1', 'mock2', 'mock3'] 1.2 通过new Array let arr = newArray('moc ...