免费地图制作网站,怎样自己申请注册公司,长春市长春网站建设网,龙岗网站建设网站制作一、安装taro-cli 二、项目文件 三、项目搭建
1、Eslint配置
在项目生成的 .eslintrc 中进行配置
{extends: [taro/react], //一个配置文件#xff0c;可以被基础配置中的已启用的规则继承parser: babel/eslint-parser…一、安装taro-cli 二、项目文件 三、项目搭建
1、Eslint配置
在项目生成的 .eslintrc 中进行配置
{extends: [taro/react], //一个配置文件可以被基础配置中的已启用的规则继承parser: babel/eslint-parser, //指定ESLint解析器rules: {react/jsx-uses-react: off,react/react-in-jsx-scope: off,no-unused-vars: [error, {varsIgnorePattern:Taro|wx}],no-mixed-spaces-and-tabs: 2, //禁止混用tab和空格 no-debugger: 2, //禁用debuggerspace-infix-ops: 2, //操作符周围要有空格space-before-blocks: 2, //语句块之前要有空格indent: [ error, 2, {SwitchCase: 1}], //缩进风格2个空格switch语句的case后面也要有空格jsx-quotes: [ error, prefer-double ], //jsx属性使用单引号import/first:0 //import语句放在文件开头}
}
2、工具
huskygit hook工具用来配置npm脚本
lint-staged检查本地代码的改动只校验改动过的文件大大提高校验效率
下载husky、lint-staged工具包
cnpm i -D husky lint-staged
下载工具包之后在package.json中进行配置 3、项目的全局配置app.config.ts
1、配置页面路由
用于指定小程序由哪些页面组成每一项都对应一个页面的 路径 文件名 信息。文件名不需要写文件后缀框架会自动去寻找对应位置的文件进行处理。
数组的第一项代表小程序的初始页面首页。小程序中新增/减少页面都需要对 pages 数组进行修改
2、window
用于设置小程序的状态栏、导航条、标题、窗口背景色
3、tabBar
如果小程序是一个多 tab 应用客户端窗口的底部或顶部有 tab 栏可以切换页面可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。 list 接受一个数组只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序每个项都是一个对象
具体配置代码如下
export default defineAppConfig({pages: [ // 页面pages/index/index,pages/order/order,],window: { // 窗口backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: WeChat,navigationBarTextStyle: black},tabBar: { // 底部导航栏color: #999,selectedColor: #333,backgroundColor: #fff,borderStyle: white,list: [{pagePath: pages/index/index, // 页面路径text: 首页, // 文字iconPath: assets/images/index-unselected.png, // 未选中图标selectedIconPath: assets/images/index-selected.png // 选中图标},{pagePath: pages/order/order,text: 订单,iconPath: assets/images/order-unselected.png,selectedIconPath: assets/images/order-selected.png}] }
})4、在微信开发者工具中展示小程序页面
执行编译命令
npm run dev:weapp执行命令后会出现一个dist文件夹使用微信开发者工具打开该文件夹即可查看小程序页面
运行展示页面
