写点什么

Taro2/3 做小程序开发的使用心得和方法

作者:9527
  • 2022 年 7 月 13 日
  • 本文字数:2626 字

    阅读完需:约 9 分钟

Taro2/3做小程序开发的使用心得和方法

H5 如何跳转小程序

1.第一步需要引入微信的 JDK


<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码

2.第二步授权获取密钥等

 wx.config({ // eslint-disable-line   debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印   appId, // 必填,公众号的唯一标识   timestamp, // 必填,生成签名的时间戳   nonceStr, // 必填,生成签名的随机串   signature,// 必填,签名   jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表   openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] });
复制代码

3.第三步在模板中使用

<wx-open-launch-weapp              id="launch-btn"              :username="gh_xxxx" //小程序中以gh_开头的原始id              :path="/pages/home/index?name=xx&ahe=xxx" //要跳转到的小程序的路由和参数          >          <script type="text/wxtag-template">              <style> //这里是触发按钮的样式                  .btn {                    width:60px;                    height:60px;                    border-radius:100%;                  }              </style>              <button class='btn'>跳转到小程序</button>          </script></wx-open-launch-weapp>
复制代码

小程序如何跳转 H5

1.小程序后台配置业务域名

这里需要将证书下载下来,让运维放到你要跳转的 H5 域名的服务下,否则跳转步过去

2.使用 WebView 标签

//这里做一个通用的跳转H5页面的入口,这里只接收要跳转的Urlimport Taro, { Component } from '@tarojs/taro'import { View, Text,Image,WebView } from '@tarojs/components'import styles from './index.module.less'class index extends Component {  state={    src:''  }  componentDidMount(){    let {linkUrl}=this.$router.params;    this.setState({src:linkUrl})  }  render() {    let {src}=this.state;    return (      <View className={styles.WebView}>         <WebView  src={src}></WebView>     </View>    );  }}
export default index;
复制代码

3.模板中跳转使用

Taro.navigateTo({  url:`/pages/webView/index?linkUrl=${data?.linkUrl}`//这里是要跳转的H5的具体地址,可携带参数的})import Taro from '@tarojs/taro'
复制代码

Taro2.x+react 做路由的拦截

这里使用高阶函数将组件包装重写 componentDidMount


import {getStorage,getCurrentPageUrlWithArgs} from './tools'function isLogin() {    return function Component(Component) {        return class extends Component {         constructor (props){            super(props);        }                 //onLoad        componentWillMount(){            //初始分享信息            // initShareMenu(this.state);        }                //阻塞 didMount , 鉴权         componentDidMount() {						//这里判断有无登录            let url=getCurrentPageUrlWithArgs();            let token=getStorage('userInfo')&&JSON.parse(getStorage('userInfo')).token;            let platfrom=getStorage('userInfo')&&JSON.parse(getStorage('userInfo')).platfrom;            //授权成功            if( token&&platfrom ){                //调用父组件的函数                super.componentDidMount && super.componentDidMount();            }else{            //    console.log('无')               Taro.redirectTo({url:`/pages/login/index?url=${encodeURIComponent(url)}`});            }        }             } }} 
export default isLogin;
//这个方法是获取带参数的路由方法,因为this.$router.params是获取不到回调地址上的参数export const getCurrentPageUrlWithArgs=()=> { const pages = Taro.getCurrentPages() const currentPage = pages[pages.length - 1]; const url = currentPage.route; const options = currentPage.options let urlWithArgs = `/${url}?` for (let key in options) { const value = options[key] urlWithArgs += `${key}=${value}&` } urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1); return urlWithArgs; }
复制代码

使用方式


import isLogin from '@/utils/isLogin';@isLogin()
复制代码

Taro3+Vue3 做小程序路由的拦截

这里是利用 Vue3 对生命周期的劫持,可以使用 Mixin,或者 Hooks 方式


import {useStore} from '@/store' // 这里使用的是Pinia大菠萝import Taro from '@tarojs/taro';import {getCurrentPageUrlWithArgs} from './tools';import { onMounted} from 'vue'// export const needLogin = {//mixin//   mounted(){//     const state=useStore();//     const url=getCurrentPageUrlWithArgs();//当前带参数的路径//     if(!state.Token){//       Taro.redirectTo({url:`/pages/login/index?url=${encodeURIComponent(url)}`});//     }//   }//  }
export default ()=>{ onMounted(()=>{ const state=useStore(); const url=getCurrentPageUrlWithArgs();//当前带参数的路径 if(!state.Token){ Taro.redirectTo({url:`/pages/login/index?backUrl=${encodeURIComponent(url)}`}); } }) }
复制代码

使用方式用 vue3 的 setUp 语法糖


<script setup>import Taro,{useDidShow } from '@tarojs/taro';import CarItem from '@/components/CarItem'//方式1import needLogin from '@/utils/needLoginHook'import {useStore} from '@/store'import { onMounted, reactive,ref, toRefs,getCurrentInstance} from 'vue'needLogin();

const allSelected=ref(false);//全选中的状态const needLoading=ref(false);//const {proxy}=getCurrentInstance();const store=useStore();const state=reactive({ gooList:[], totalPrice:0,})</script>


方法2<script>import {needLogin} from '@/utils/needLoginHook'export default { mixins:[needLogin],}</script>
复制代码


发布于: 刚刚阅读数: 7
用户头像

9527

关注

还未添加个人签名 2020.05.08 加入

还未添加个人简介

评论

发布
暂无评论
Taro2/3做小程序开发的使用心得和方法_小程序_9527_InfoQ写作社区