Giter VIP home page Giter VIP logo

wx-open-launch's Introduction

wx-open-launch

Vue、React 快速开发库

  • 微信 H5 跳转小程序,使用 wx-open-launch-weapp 标签
  • 微信 H5 跳转APP,使用 wx-open-launch-app 标签

npm 安装

npm i wx-open-launch

H5 跳转小程序

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>
	.menu-logo-wx-text {
		font-size: 14px;
		margin-top: 10%;
	}

	.menu-logo-wx {
		height: 30%;
		width: 60%;
	}

	...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片,不能填写物理路劲,将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;

let launchParams = {
	eleId: "launch-btn", // 页面元素标签ID,必填
	url: "", // 小程序地址,非必填
	username: "gh_xxxxxxxxxx", // 小程序原始ID,必填
	content: content, // 按钮HTML元素及样式,必填
	launchEvent: function(e) {...}, // 点击按钮正常跳转触发,必填
	errorEvent: function(e) {...}, // 点击跳转抛出异常,必填
	active: true, // 按钮是否激活跳转小程序,为了满足个别情况下改按钮不需要跳转小程序
	noAtiveEvent: function() {...} // 按钮不跳转小程序时的点击事件,active 为 false 时必填
};
launchWeApp(launchParams); // 引入JS之后调用launchWeApp

H5 跳转APP

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>
	.menu-logo-wx-text {
		font-size: 14px;
		margin-top: 10%;
	}

	.menu-logo-wx {
		height: 30%;
		width: 60%;
	}

	...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片,不能填写物理路劲,将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;

let launchParams = {
	eleId: "launch-btn", // 页面元素标签ID,必填
	appid: "", // 所需跳转的AppID,必填
	extinfo: "", // 跳转所需额外信息,非必填
	content: content, // 按钮HTML元素及样式,必填
	launchEvent: function(e) {...}, // 点击按钮正常跳转触发,必填
	errorEvent: function(e) {...}, // 点击跳转抛出异常,必填
	active: true, // 按钮是否激活跳转APP,为了满足个别情况下改按钮不需要跳转APP
	noAtiveEvent: function() {...} // 按钮不跳转APP时的点击事件,active 为 false 时必填
};
launchApp(launchParams); // 引入JS之后调用launchApp

wx-open-launch's People

Contributors

cacocode-zz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.