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

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

 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'] });

<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页面的入口，这里只接收要跳转的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;

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

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()

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)}`});    }	}) }

<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>