引入

<!-- 引入 uniapp webview sdk 在body后 -->
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

网页向 APP 传值

function postMsg() {
    uni.getEnv(function (res) {
      console.log('shebei' + JSON.stringify(res))
    })
    // 向 APP 发送消息 （注意看这里 01）
    uni.postMessage({
      data: {
        name: 'head',
        age: 19,
        appfv:true
      }
    })

APP 接受传值

<template>
    <view class="content"><web-view src="http://" @message="handleMessage"></web-view></view>
</template>

<script setup>


function handleMessage(evt) {
    const [data] = evt.detail.data
}


</script>

APP 向网页传值

就是链接里加了个参数

Read More

监听基础类型

const nums = ref(9)

watch(nums, (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
})

监听复杂类型

const demo = reactive({
    name: 'w',
    nickName: 'f',
    soulmate: {
        name: '',
        nickName: ''
    }
})

监听整个对象

watch(demo, (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
})

自动开启{deep：true} ， 所有子属性的更改都会触发监听事件

Read More

安装

//安装最新版本
npm i sass-resources-loader --save-dev

//安装指定版本
npm i sass-resources-loader@2.1.1 --save-dev

配置

module.exports = {
    chainWebpack: (chain) => {
        const oneofsMap =  chain.module.rule('scss').oneOfs.store
        oneofsMap.forEach(item=>{
            item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              resources: './src/styles/variables.scss', 
            })
        })
    } 
} 

基本使用

安装

npm i vue-router

Read More

部署

工程目录下创建./store/index.js

//vuex store
//引入 Vuex , Vue
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
//准备 actions 用于响应组件中的动作
const actions = {};
//用于操作数据（state）
const mutations = {};
//用于存储数据
const state = {};
//创建 store 并暴露
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

在 main.js 中配置

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import store from "./store/index.js";

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue({
  render: (h) => h(App),
  store,
}).$mount("#app");

使用

结构示意

Read More