uniapp3: 小程序开发

# 创建项目
# ! destination directory is not empty, aborting. Use --force to override (因为目录下存在 .git 目录)

npx degit dcloudio/uni-preset-vue#vite --force
npx degit dcloudio/uni-preset-vue#vite-ts --force

# 全局样式
yarn add sass --dev

import { createSSRApp, watch } from "vue";
import { createPinia } from "pinia";
import PiniaStateTree from "@jswork/pinia-state-tree";
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  const pinia = createPinia();

  pinia.use(PiniaStateTree);
  app.use(pinia);
  //...
}

一套扩展组件

• 文档: https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html
• easycom
• uni-ui: @dcloudio/uni-ui

nx.$event

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

import { debounce } from 'lodash-es'

export default {
  methods: {
    // 使用 Lodash 的防抖函数
    click: debounce(function () {
      // ... 对点击的响应 ...
    }, 500)
  }
}

export default defineConfig({
  plugins: [uni()],
  css: {
    postcss: {
      plugins: [
        require('postcss-pxtorpx-pro')({
          // 转化的单位
          unit: 'rpx',
          // 单位精度
          unitPrecision: 5,
          // 不需要处理的css选择器
          selectorBlackList: [],
          // 不需要转化的css属性
          propBlackList: [],
          // 直接修改px，还是新加一条css规则
          replace: true,
          // 是否匹配媒介查询的px
          mediaQuery: false,
          // 需要转化的最小的pixel值，低于该值的px单位不做转化
          minPixelValue: 2,
          // 不处理的文件
          exclude: /node_modules|components/gi,
          // 转化函数
          // 视口375px
          transform: (x) => 2 * x
        })
      ]
    }
  }
})

# 问题表现
chdir(2) failed.: No such file or directory

解决: 在软件左侧目录树内 右键目录，选择 打开文件所在目录。 跳出访达后 重新点内置终端即可跳出正常命令行。

参考: https://ask.dcloud.net.cn/question/84993

# 别人发现的原因
初步原因已经找到.是由于 @mac-xiang/method 包中 导出方法里的一句 module.exports=method 导致; 这一句覆盖了原有 vendor.js的导出属性. 这在编译小程序时被覆盖了.
# 解决方案
看上去，官方没有给出解决方案

# 我的解决方案
if(typeof wx === 'undefind'){
  module.exports = nx.xx;
}

参考: 

https://ask.dcloud.net.cn/question/145134

https://ask.dcloud.net.cn/question/169160

{
  "pages": [
    //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app122"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

解决方案: 

我配置的位置不对，应该与 pages 平级 src/pages.json

参考：

https://ask.dcloud.net.cn/question/127894

https://blog.csdn.net/jiudenggushijingguo/article/details/115492830

src/manifest.json

    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false,
            "enhance" : true
        },
        "usingComponents" : true
    },

vite.config.js

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
  build:{
    sourcemap:true,
  },
  plugins: [
    uni(),
  ],
})

参考

https://juejin.cn/post/6964186905789333518

# pinia 锁室至这个版本，原因 @dcloudio/uni-h5 官方使用的 vue 为 3.2.47；pinia 最新版必须是 vue@3.3 才会兼容。
"pinia": "2.0.36"
# 错误表现
"hasInjectionContext" is not exported by "node_modules/vue-demi/lib/index.mjs

解决办法

将 vue 升级到 3.3 及以上版本，将 pinia 升级到 2.1.0 及以上版本。Vue 3.3 引入了很多新的特性，特别是对泛型组件的支持。
如果无法升级到 Vue 3.3 及以上版本，可以锁定 Pinia 的版本为 2.0.36。由于某些原因，我们的项目无法升级 Vue，因此采用了这种方法。

作者：微冷635
链接：https://juejin.cn/post/7234702012012265531
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考

https://juejin.cn/post/7234702012012265531

https://github.com/dcloudio/uni-app/issues/4327

# vite(esm)环境用: 
const env = import.meta.env || process.env;