小程序自学笔记（二、框架和环境）

关联笔记：
笔记3 uniapp+uview基础使用
笔记4 接口联调

步骤1-4

1. 确定学习框架为uni-app

2. 先了解微信小程序开发工具大致结构（基础语法在day2）

3. 安装和配置环境

   • 下载配置node+pnm+pnpm node+pnm+pnpm安装笔记
   • 下载微信开发者工具+注册微信小程序+下载编写工具HBuildX（或者vsCode，最后选了HBuildX)

4. 找一个uni项目的学习课程跟着写

2 先了解微信小程序开发工具大致结构

• 一般选uni-app搭配uview

uni-app使用文档 https://uniapp.dcloud.net.cn/component
微信小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/component
uView(uni-app UI框架) https://v1.uviewui.com/components/badge.html

• 步骤2的理由：组件使用小程序规范
  

• 认识小程序结构
  

• 了解一些时序图
  

• wxml里导入的行为{{}}去js里写设定

• uniapp=vuejs的语法+小程序的api

• 打开页面都会覆盖当前页面：设置里面搜索 enablePreview，把 Workbench 中的 Enable Preview 取消

• entryPagePath 代表锁定小程序首页

• 在微信开发助手中使用[无模板]创建新项目会报冲突错误，可以去掉app.json中的以下部分：

  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",

• 认识一下页面结构图
  
• 底下导航栏的语法:

官方文档 点【框架】-【小程序配置】-【全局配置】-找到关键词【tarbar】学习
网址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

写在app.json文件中windows部分

"navigationBarTitleText": "导航栏显示的标题",  
"navigationBarBackgroundColor": "#fff",  导航栏背景色:16进制
"navigationBarTextStyle":"black", 导航栏标题颜色: black/white
"backgroundTextStyle":"light",  下拉loading的样式 dark/light
"backgroundColor": "#efefef",  下拉窗口的背景色
"enablePullDownRefresh": true,  开启下拉刷新
"onReachBottomDistance": 50  上拉触底的距离,获取下页数

注：tabBar: 配置数量2-5个

3 尝试用vsCode编写uni-app，需要做的配置

留着备用 万一之后用不习惯HBuildX又换回vscode，也已经配好了可以直接用。

下载的插件清单

• 注意vue2的插件(Vetur)和vue3(Vue - Official)的一起开着会报错，用哪个语言记得把另一个禁用
• Chinese (Simplified)
• uni-helper
• uni-create-view
• uniapp小程序扩展

uni-ui组件自动导入配置

• 工程主目录输入命令

pnpm i @dcloudio/uni-ui

• 在pages.json中导入uni-ui组件

  //uni-ui组件自动导入规则
  "easycom": {
    //自动扫描components中是否有uni组件并导入
		"autoscan": true,
    //正则方式匹配在node_modules 
    //页面中使用了x 就能替换到把@dcloudio的uni-x.vue里
		"custom": {
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},

uni-app官网 (dcloud.net.cn)

uni-ui-types组件自动导入配置

（这里失败了 决定直接用hbuildx 方便还什么都不用配- -
不过如果不需要附加组件悬浮提示的话就无所谓了)

• 安装依赖

pnpm i -D @uni-helper/uni-ui-types

• 配置tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
    "@dcloudio/types",
    "miniprogram-api-typings",
    "@uni-helper/uni-app-types"
  ]
  },
  "vueCompilerOptions": {
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}