Skip to content

微信小程序开发脚手架 (by uniapp)

· 6 min · uniapp / typescript / vue3 / vite3 / myproject

微信小程序开发脚手架 (by uniapp)#

Intro#

Features#

Construct#

...
| - src
    |- api            // 和后端交互的接口统一定义
    |- compontents    // 组件模块
      |- states       // 公用状态组件
      |- ui           // 公用UI组件
      |- view         // pages页面相关的模块
    |- composables    // 组合函数
    |- http           // 请求封装
    |- layouts        // 布局方案
    |- locale         // 国际化资源
    |- pages          // 页面定义文件
    |- static         // 静态资源
    |- store          // 应用缓存
    |- style          // 自定义样式
    |- uni_modules    // uniapp-plugins
    |- App.vue        // 启动页
    |- main.ts        // 主入口ts
    |- types.ts       // 类型定义
- eslint.config.mjs   // 开发规范
- manifest.config.ts  // uniapp应用运行打包相关配置
- packages.json       // 包管理
- pages.config.ts     // 页面配置文件
- unocss.config.ts    // unocss配置
- vite.config.ts      // vite构建工具配置


...

Quick start#

Terminal window
npm install -g pnpm
# not npm for POSIX platforms
curl -fsSL https://get.pnpm.io/install.sh | sh -

Install & Running#

Terminal window
# add packages
pnpm install


# preview h5+
pnpm run dev:h5


# development weixin
pnpm run dev:mp-weixin


# production weixin
pnpm run build:mp-weixin

Develop#

保姆级开发流程

当前已设置好小程序主页面框架, 页面主题样式、底部头部导航、背景

开始开发一个页面#

页面定义#

 {
  path: 'pages/qa', // 访问路径 (约定好的目录)
  type: 'page'     // 类型是页面
}

文件命名方式#

布局#

<!--  uni-pages 布局参数 -->
  <route lang="json">
    {}
  </route>

以下是布局中可能使用的代码 (仅参考)

const windowHeight = ref(uni.getWindowInfo().windowHeight)
<view :style="{height: `${windowHeight}px`}"></view>
const navBarTop = ref(30) // 内边距高度，单位px
const navBarHeight = ref(70) // navbar的高度，单位px


onMounted(() => {
  // #ifdef MP-WEIXIN
  // 编译成小程序需要页面顶部和微信小程序菜单栏对齐
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  navBarTop.value = menuButtonInfo.top
  navBarHeight.value = menuButtonInfo.height
  // #endif
})
(202.09.23 更新)#

** 注意:通常在小程序里,页面都需要顶部导航组件 现已经封装成组件,根据参数动态显示顶部导航, 使用样例参考 /pages/qa.vue

页面跳转常用几种方式#

国际化#

/*ts中使用*/
import { useI18n } from 'vue-i18n'
const { t } = useI18n()


const text: string = t('translate.key')


// template中使用
<!--正常使用-->
<label>
{{ $t('translate.key') }}
</label>


<!-- 带参数的用法 -->
<label>
{{ $t('translate.key',[params...]) }}
</label>

注意点:#

样式兼容性#

<!-- 允许样式穿透 -->
<script lang="ts">
export default {
  options: { styleIsolation: 'shared' },
}
</script>

开发参考#