uniapp+vite 博客小程序上线

Jiafeng

分类: Vue 900 0

一、前言

自上次开发小程序已经很久了,看到博客主题有相关的小程序,正好拿来复习下小程序相关知识。
本次采用uni-app+vite cli开发,具体搭建流程参考uni-app官方文档
uni+vite小程序源码:https://github.com/zjiafeng/uni-vite
参考代码:https://github.com/D-xuanmo/blog-miniprogram-wordpress

二、开发

  1. 模板下载:uniapp 官网通过vue-cli 命令行创建uniapp,使用 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project下载模板;

  2. 安装css预处理 sass: 项目终端输入:yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass

  3. 配置使用微信小程序API,由于安装的uniapp-ts项目只会包含uni-app本身的@types声明,如果想直接使用wx或小程序的api的话就需要自行添加

    以微信小程序为例:项目终端输入:yarn add @types/weixin-app

    打开根目录tsconfig.json文件,在types选项中添加weixin使用的声明

    {
     "compilerOptions": {
       "target": "esnext",
       "useDefineForClassFields": true,
       "module": "esnext",
       "moduleResolution": "node",
       "strict": true,
       "jsx": "preserve",
       "sourceMap": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "lib": ["esnext", "dom"],
       "types": ["@dcloudio/types", "weixin-app"],
       "baseUrl": ".",
       "paths": {
         "@/*":["src/*"]
       }
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
    }
  4. 运行项目: 使用yarn run dev:mp-weixin运行;微信开发者工具打开dist/mp-weixin文件夹

三、部署

  1. 上传代码,通过微信开发者工具进行上传,在版本管理处可看到开发版本,可以使用体验版进行查看

  2. 注意:上线要把接口域名添加到小程序管理后台的request里才可以正常访问

    位置:开发管理>开发设置>服务器域名>request合法域名

  3. 提交审核,一般在24h内。审核完成就可以进行发布,发布后大概需要1-2天就可以在微信小程序中搜索。

以下是我的小程序码,欢迎访问~

  • 4人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
uni-app、Vue3、小程序

作者简介: Jiafeng

共 0 条评论关于 “uniapp+vite 博客小程序上线”

Loading...