欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！
前文回顾：
小程序开篇—国内IT技术圈的技能树貌似点歪了？

开发者工具设置

在这里插入图片描述
小程序开发者工具默认外观主题是深色模式的，可以在设置中配置自己喜欢的主题样式。

在这里插入图片描述
在代理设置中选择，【不使用任何代理，勾选后直连网络】。目的是，防止在开发过程中，电脑上的一些《科学上网软件》（懂得都懂）会影响到开发者工具的正常运行。

创建小程序项目

在开发者工具初始页面点击➕号，创建自己的第一个小程序项目：

在这里插入图片描述
选择好自己的项目名称、项目存放路径、AppID（AppID的获取以及开发者账号的注册已经在上一篇文章中有详细说明）。

选择不使用云服务，（云服务开发无需自己搭建服务器上线，即可使用云函数、云数据库、云存储以及微信云托管等完整云端能力。但是需要付费哟～我们目前的阶段是为了学习小程序的开发，无需使用云服务）

点击确定按钮，稍等片刻，即可开启我们的小程序之旅～

在这里插入图片描述
看到这样的界面就说明，小程序项目已经创建成功了～（有一说一，这个开发者界面怎么有点眼熟啊(●–●)

在界面的左侧模拟器区域，是对小程序界面的实时热更新的展示，可以在模拟器区域在线查看项目效果（点击上方的编译按钮即可刷新模拟器界面），一个界面即可完成编码与一些简单的功能测试（买显示屏的理由又少了一个）

当然，如果想在自己的手机上预览自己编写的小程序项目，可以点击【预览】按钮，扫描二维码即可预览自己的小程序啦～想必等项目完工的那一刻，自己使用自己开发的小程序的时候，一定是成就感满满趴～

在这里插入图片描述

我们在开发的过程中，可能还需要查阅微信官方的开发者文档，在开发者工具页面的上方，点击帮助按钮，即可找到开发者文档入口，点击就会跳转到微信官方开发者文档啦。在这里小新就不做过多的演示了。

小程序项目目录基本结构

在这里插入图片描述

  • pages 用来存放所有小程序的页面
  • utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
  • app.js 小程序项目入口文件
  • app.json 小程序项目的全局配置文件
  • app.wxss 小程序项目的全局样式文件（类比css）
  • project.config.json 项目的配置文件
  • sitemap.json 用来配置小程序及其页面是否允许被微信索引
  • .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
  • .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
  • .wxml 文件（页面的模版结构文件）
  • .wxss 文件（当前页面的样式表文件）

其实就像咱们正常的Web开发一样，只要记住一点：

html ⇒ wxml
css ⇒ wxss
js ⇒ js

json 配置文件：JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。小程序项目中大致有以下几种json配置文件

  • 项目根目录中的 app.json 配置文件
  • 项目根目录中的 project.config.json 配置文件
  • 项目根目录中的 sitemap.json 配置文件
  • 每个页面文件夹中的 .json 配置文件
  1. app.json：是当前小程序的全局配置，包括了当前小程序的所有页面路径、窗口外观、界面表现、底部tab 等。Demo 项目里边的 app.json 配置内容如下：
{
	// pages 用来记录当前小程序所有页面的路径
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 全局定义小程序所有页面的背景色、文字颜色等
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  // 全局定义小程序组件所使用的样式版本
  "style": "v2",
  // 指明sitemap.json 的位置
  "sitemapLocation": "sitemap.json"
}
  1. project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：
    • setting中保存了编译相关的配置；
    • projectname中保存的是项目名称；
    • appid中保存的是小程序的账号ID
{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "wxdxxxxxxxx107",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

setting中保存的其实就是一些本地设置的配置。

比如：勾选【将JS编译成 ES5】其实就是将setting 中的es6 这一项设置为 true。
勾选【上传代码时样式自动补全】其实就是将setting 中的 postcss 这一项设置为true。

在这里插入图片描述
在本地设置中选择功能的一些操作，最终会体现在根目录下的project.config.json 这个文件的setting这一项中。

  1. sitemap.json文件：微信已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json文件就是用来配置小程序页面是否允许微信索引。
    当开发者允许微信索引时，微信会为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

sitemap.json文件内容：

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",  // allow / disallow
  "page": "*"
  }]
}

rules数组指的就是索引规则，page值为 * 号，action值为 allow，意思就是所有的页面都允许被微信建立索引。

注意：sitemap.json 的索引提示是默认开启的，如需要关闭 sitemap.json 的索引提示，可在小程序项目配置文件 project.config.json的setting 中配置字段 "checkSiteMap": false。

  1. 页面中的 .json配置文件

小程序中的每一个页面，都可以使用 .json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 中 window中相同的配置项，权重高于app.json。

在这里插入图片描述
例如，在app.json中配置了导航bar的背景色为白色，随后在index/index.json文件中设置背景色为绿色，此时index页面的配置项会覆盖 app.json 中window的全局配置项，于是模拟器显示绿色。

下篇文章内容：WXML模版｜WXSS样式｜JS逻辑交互
专栏订阅入口【小程序｜原力计划】

# 小程序 # 前端 # javascript # json
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue