微信小程序开发

发表于 分类于 本文字数： 867 阅读时长 ≈ 3 分钟

使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目,以 vue3+ typescript 开发的工程。

创建项目

1
2
3
4
5
6
7
8
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

// 配置微信小程序appid
1. pnpm install
2. npm run dev:mp-weixin
3. 微信开发者工具 打开 `dist/dev/mp-weixin`
4. 引用pinia ，unplugin-auto-import 和uview-plus 等基础依赖。
参照官方文档 https://uiadmin.net/uview-plus/components/npmSetting.html 。

分包处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 小程序目录结构和 app.json subPackages 字段声明项目分包结构
├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils


{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ],
      "entry": "index.js"
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

字体文件处理

1
2
3
4
5
6
7
8
9
// 采用服务端加载减小包大小
uni.loadFontFace({
  global: true,
  family: "Bitstream Vera Serif Bold",
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success() {
    console.log("success");
  },
});

source 资源处理，放置到门户前端 nginx 里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 字体文件hash特殊处理，避免加载不到
// 用于输出静态资源的命名，[ext]表示文件扩展名
assetFileNames: (assetInfo: any) => {
  const info = assetInfo.name.split(".");
  let extType = info[info.length - 1];
  // console.log('文件信息', assetInfo.name)
  if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
    extType = "media";
  } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
    extType = "img";
  } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
    extType = "fonts";
    //字体文件特殊处理
    return `fonts/[name].[ext]`;
  }
  return `${extType}/[name].[hash].[ext]`;
};

图片静态资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 缓存
import { dict } from "@/store/dict";
import { getDicts } from "@/api/app";
import { ref, toRefs } from "vue";

/**
 * 获取字典数据
 */
export function useDict(...args: any): any {
  const res = ref({});
  return (() => {
    args.forEach((dictType: string) => {
      // @ts-ignore
      res.value[dictType] = [];
      const dicts = dict().getDict(dictType);
      if (dicts) {
        // @ts-ignore
        res.value[dictType] = dicts;
      } else {
        getDicts(dictType).then((resp: any) => {
          // @ts-ignore
          res.value[dictType] = resp.data.map((p: any) => ({
            name: p.label,
            value: p.value,
            elTagType: p.listClass,
            elTagClass: p.cssClass,
          }));
          // @ts-ignore
          dict().setDict(dictType, res.value[dictType]);
        });
      }
    });
    return toRefs(res.value);
  })();
}

webview 组件注意事项(校验文件)

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。
web-view 加载的 url 添加 校验文件，包括内部再次 iframe 内嵌的其他 url 。
小程序平台， src 指向的链接需登录小程序管理后台配置域名白名单。App 和 H5 无此限制。
小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。

小程序分享转发功能

新建 mixins/share.ts 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// share.ts
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

export default {
  // #ifdef MP
  // 设置该页面的分享信息 share
  onShareAppMessage() {
    const view = getCurrentPages();
    const mp = view?.[view.length - 1]?.$vm?.shareData?.mp;
    return {
      title: "邀请你使用汉融通",
      path: mp?.path || "",
      imageUrl: mp?.imgUrl || "",
    };
  },
  // 用户点击右上角转发到朋友圈
  onShareTimeline() {
    const view = getCurrentPages();
    const mp = view?.[view.length - 1]?.$vm?.shareData?.mp;
    return {
      title: "邀请你使用汉融通",
      query: "",
      imageUrl: mp?.imgUrl || "",
    };
  },
  // #endif
  setup() {
    const shareData = ref({
      h5: {
        // 分享标题
        title: "",
        // 分享描述
        des: "",
        // 分享图标
        imgUrl: "",
        // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        link: "",
      },
      mp: {
        // 转发标题 默认值(当前小程序名称)
        title: "",
        // 转发路径 必须是以 / 开头的完整路径
        path: "/pages/index/index",
        // 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
        imgUrl: "",
        // 自定义页面路径中携带的参数
        query: {},
      },
    });

    onLoad(() => {
      // 如果需要初始化操作可以在这里进行
    });

    onShow(() => {
      // 页面显示时的逻辑
    });

    // 暴露给模板使用
    return {
      shareData,
    };
  },
};
1
2
3
4
// main.ts注入
import shareMixin from "./mixins/share";

app.mixin(shareMixin);
1
2
3
4
5
6
7
8
9
//APP.vue
// 全局启用分享功能
uni.showShareMenu({
  withShareTicket: true,
  menus: [
    "shareAppMessage",
    //'shareTimeline'
  ],
});