微信小程序|小程序的构成(初识小程序详细简介)

小程序的构成

1.项目结构

1.1 项目的基本组成结构

1.1.1 $pages(目录)$

• 用来存放所有小程序页面

• 所有的页面都以单独的文件夹放在pages目录中

1.1.2 utils(目录)

• 用来存放工具性质的模块(例如:格式化事件的自定义模块)

1.1.3 $app.js$

• 小程序项目的入口文件

1.1.4 $app.json$

• 小程序项目的全局配置文件

1.1.5 app.wxss

• 小程序项目的全局样式文件

1.1.6 project.config.json

• 项目的配置文件

小程序开发者工具在每个项目的根目录只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

项目配置文件

可以在项目根目录使用 project.config.json 文件对项目进行配置。

字段名	类型	说明
miniprogramRoot	Path String	指定小程序源码的目录(需为相对路径)
qcloudRoot	Path String	指定腾讯云项目的目录(需为相对路径)
pluginRoot	Path String	指定插件项目的目录(需为相对路径)
compileType	String	编译类型
setting	Object	项目设置
libVersion	String	基础库版本
appid	String	项目的 appid，只在新建项目时读取
projectname	String	项目名字，只在新建项目时读取
packOptions	Object	打包配置选项
debugOptions	Object	调试配置选项
scripts	Object	自定义预处理

compileType 有效值

名字	说明
miniprogram	当前为普通小程序项目
plugin	当前为小程序插件项目

setting 中可以指定以下设置

字段名	类型	说明
es6	Boolean	是否启用 es6 转 es5
postcss	Boolean	上传代码时样式是否自动补全
minified	Boolean	上传代码时是否自动压缩
urlCheck	Boolean	是否检查安全域名和 TLS 版本

setting示例配置:

"setting": {
        "urlCheck": true,
        "es6": true,
        "enhance": true,
        "postcss": true,
        "preloadBackgroundData": false,
        "minified": true,
        "newFeature": false,
        "coverView": true,
        "nodeModules": false,
        "autoAudits": false,
        "showShadowRootInWxmlPanel": true,
        "scopeDataCheck": false,
        "uglifyFileName": false,
        "checkInvalidKey": true,
        "checkSiteMap": false,
        "uploadWithSourceMap": true,
        "compileHotReLoad": false,
        "lazyloadPlaceholderEnable": false,
        "useMultiFrameRuntime": true,
        "useApiHook": true,
        "useApiHostProcess": true,
        "babelSetting": {
            "ignore": [],
            "disablePlugins": [],
            "outputPath": ""
        },
        "enableEngineNative": false,
        "useIsolateContext": true,
        "userConfirmedBundleSwitch": false,
        "packNpmManually": false,
        "packNpmRelationList": [],
        "minifyWXSS": true,
        "disableUseStrict": false,
        "minifyWXML": true,
        "showES6CompileOption": false,
        "useCompilerPlugins": false
    },

scripts 中指定自定义预处理的命令

名字	说明
beforeCompile	编译前预处理命令
beforePreview	预览前预处理命令
beforeUpload	上传前预处理命令

packOptions

packOptions 用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。

目前可以指定 packOptions.ignore 字段，用以配置打包时对符合指定规则的文件或文件夹进行忽略，以跳过打包的过程，这些文件或文件夹将不会出现在预览或上传的结果内。

packOptions.ignore 为一对象数组，对象元素类型如下：

字段名	类型	说明
value	string	路径或取值
type	string	类型

其中，type 可以取的值为 folder、file、suffix、prefix，分别对应文件夹、文件、后缀、前缀。

示例配置如下:

{
  "packOptions": {
    "ignore": [{
      "type": "file",
      "value": "test/test.js"
    }, {
      "type": "folder",
      "value": "test"
    }, {
      "type": "suffix",
      "value": ".webp"
    }, {
      "type": "prefix",
      "value": "test-"
    }]
  }
}

注: value 字段的值不支持通配符、正则表达式。若表示文件或文件夹路径，以小程序目录 (miniprogramRoot) 为根目录。

debugOptions

debugOptions 用以配置在对项目代码进行调试时的选项。

目前可以指定 debugOptions.hidedInDevtools 字段，用以配置调试时于调试器 Sources 面板隐藏源代码的文件。

hidedInDevtools 的配置规则和 packOptions.ignore 是一致的。

当某个 js 文件符合此规则时，调试器 Sources 面板中此文件源代码正文内容将被隐藏，显示为：

// xxx.js has been hided by project.config.json

注：配置此规则后，可能需要关闭并重新打开项目才能看到效果。

项目配置示例：

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  },
  "packOptions": {},
  "debugOptions": {}
}

⚠**“checkSiteMap”: false, 可以取消黄色警告(取消sitemap的索引提示)**

• sitemap.json-用来配置小程序及其页面是否允许被微信索引

1.2 页面的基本文件(组成部分)

• .js-逻辑交互(脚本文件)

  • 存放页面的数据、事件处理函数等

• .json-配置(配置文件)

  • 配置当前页面窗口的外观、表现等

• .wxss-美化页面结构(样式文件)

  • 当前页面的样式表页面

• .wxml-渲染页面结构(结构文件)

  • 页面的模板结构文件

2.JSON-配置文件(配置文件)

app.json是当前小程序的$全局配置$，包括了小程序的$所有页面路径、窗口外观、界面表现、底部tab$等

每个页面自己的json内容与app.json冲突时会优先使用自身的json内容

2.1 $pages$

用来记录当前小程序所有的页面路径

新建页面只需要在app.js文件的"pages":[]列表中加入"pages/页面名/页面名"即可

"pages":[
    "pages/home/home",    //放在第一个位置的页面会被当做首页显示
    "pages/user/user",
    "pages/index/index",
    "pages/logs/logs",
    "pages/msg/msg"
  ],

2.2 $window$

全局定义小程序所有页面的背景色、文字颜色等

"window":{
    "backgroundTextStyle":"light",  // 小圆点的主题颜色light/dark
    "navigationBarBackgroundColor": "#ffe23b",  // 导航栏背景颜色  
    "navigationBarTitleText": "Jc图片表情Hub",  // 导航栏文字标题内容
    "navigationBarTextStyle":"black",  // 导航栏文字颜色
    "enablePullDownRefresh": true,  // 是否开启下拉刷新
    "backgroundColor": "#ffe29b"  // 背景颜色(下拉刷新时才能看到)
  },

2.3 $style$

全局定义小程序组件所使用的样式版本

  "style": "v2",

2.4 sitemapLocation

用来指明sitemap,json的值

  "sitemapLocation": "sitemap.json",

3.WXSS-美化页面(样式文件)

3.1 新增了 rpx 尺寸单位

WXSS支持新的尺寸单位 $\textcolor{red}{rpx} $ ，在不同大小屏幕上可以自动进行换算适配

3.2 提供全局样式和局部样式

项目根目录中的app.json会作用于所有小程序页面

局部页面的 .wxss 样式仅对当前页面生效

3.3 仅支持部分CSS选择器

• .class 和 #id
• element
• 并集选择器、后代选择器
• ::after 和 ::before 等伪类选择器

4.WXML-渲染页面(结构文件)

4.1 WXML标签名称

HTML标签名称(div,span,img,a)

WXML标签名称(view,text,image,navigator)

4.2 属性节点

HTML：超链接

WXML：

4.3 类似于Vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

5.JS-逻辑交互(脚本文件)

小程序中js文件分为三大类:

5.1 app.js

• 是**$\textcolor{red}{整个小程序的入口文件} $\ast \ast ，通过调用\ast \ast$\textcolor{red}{App()} $**函数来启动整个小程序

5.2 页面的 .js 文件

• 是**$\textcolor{red}{页面的入口文件} $\ast \ast ，通过调用\ast \ast$\textcolor{red}{Pages()} $**函数来创建并运行页面

5.3 普通的.js文件

• 是**$\textcolor{red}{普通的功能模块文件} $\ast \ast ，用来封装\ast \ast$\textcolor{red}{公共的函数或属性}$**供页面使用

6.小程序的宿主环境

$宿主程序是程序运行所必须的依赖环境$

6.1 小程序宿主环境的内容

6.1.1 通信模型

小程序中通信的主题是 $渲染层$ 和 $逻辑层$，其中：

① WXML模板和WXSS样式工作在渲染层

② JS脚本工作在逻辑层

6.1.2 运行机制

小程序的启动过程

1. 把小程序的代码包下载到本地
2. 解析app.json 全局配置文件
3. 执行app.js 小程序入口文件，调用APP()创建小程序实例
4. 渲染小程序首页
   • 加载解析页面的 .json配置文件
   • 加载页面的 .wxml模板和 .wxss样式
   • 执行页面的 .js文件，调用Page()创建页面实例
   • 页面渲染完成

​ 5.小程序启动完成

6.1.3 组件

6.1.3.1 常用的视图容器类组件

• view

  • 普通视图区域
  • 类似于HTML中的 div，是一个块级元素
  • 常用来实现页面的布局效果

  <view class="container1">
      <view>A</view>
      <view>B</view>
      <view>C</view>
  </view>
  

• scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

  <view><text>纵向滚动</text></view>
  <scroll-view class="container2" scroll-y>
      <view>A</view>
      <view>B</view>
      <view>C</view>
  </scroll-view>
  

• swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图 item 组件

  <view>轮播图</view>
  <!-- indicator-dots                小圆点   
       indicator-color="white"       默认颜色
       indicator-active-color="grey" 激活颜色
       autoplay                      自动轮播
       interval="3000"               自动轮播时间间隔
       circular                      循环轮播
  -->
  <swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="3000" circular>
      <!-- 第一个轮播图 -->
      <swiper-item>
          <view class="item">A</view>
      </swiper-item>
      <!-- 第二个轮播图 -->
      <swiper-item class="item">
          <view class="item">B</view>
      </swiper-item>
      <!-- 第三个轮播图 -->
      <swiper-item class="item">
          <view class="item">C</view>
      </swiper-item>
  </swiper>
  

6.1.3.2 常用的基础内容组件

• text

  • 文本组件
  • 类似于HTML中的span标签，是一个行内元素

  text组件的user-select 或 selectable属性，实现长按选中文本内容效果

  <!-- user-select用户长按可选中复制 -->
  <view>
      手机号码为:
      <text user-select="true">13088888888</text>
  </view>
  

• rich-text

  • 富文本组件
  • 支持把HTML字符串渲染为WXML结构

  rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

  <!-- rich-text可以通过nodes属性把html字符串渲染成对应的UI结构 -->
  <rich-text nodes="
  标题
  "></rich-text>
  

• button

  • 按钮组件
  • 主要属性:type(类型:默认、primary、warn)、size(尺寸)、bind(绑定事件函数)

  <!--button组件-->
  <view>~~~~~~~~~~通过 type 指定按钮类型~~~~~~~~~~</view>
  <button>默认按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>
  
  <view>~~~~~~~~~~size="mini" 小尺寸按钮~~~~~~~~~~</view>
  <button size="mini">默认按钮</button>
  <button type="primary" size="mini">主色调按钮</button>
  <button type="warn" size="mini">警告按钮</button>
  
  <view>~~~~~~~~~~plain 镂空按钮~~~~~~~~~~</view>
  <button size="mini" plain>默认按钮</button>
  <button type="primary" size="mini" plain>主色调按钮</button>
  <button type="warn" size="mini" plain>警告按钮</button>
  

• image

  • 图片组件
  • 主要属性:src(路径)、mode(裁剪和缩放模式)

  <view>~~~~~~~~~~image组件~~~~~~~~~~</view>
  <!-- image 的 mode属性-->
  <image src="/images/mountain.jpg" mode="scaleToFill" ></image>
  <image src="/images/mountain.jpg" mode="widthFix" ></image>
  <image src="/images/mountain.jpg" mode="heightFix" ></image>
  <image src="/images/mountain.jpg" mode="aspectFit" ></image>
  

​ mode属性值如下:

6.1.4 API

小程序的API是由宿主环境提供的，通过这些小程序的API，开发者可以方便的调用微信提供的能力，例如:获取用户信息、本地储存、支付功能等。

7.小程序协同分工与分布

7.1 协同分工

7.1.1 项目成员的组织结构

7.1.2 开发者权限说明

• 开发者权限:可使用小程序开发工具及对小程序的功能进行代码开发
• 体验者权限：可使用体验版小程序
• 登录权限：可登录小程序管理后台，无需管理员确认
• 开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开下程序
• 腾讯云管理：云开发相关设置

7.1.3 小程序成员管理

7.1.4 小程序的开发流程

7.2 小程序的发布

7.2.1 小程序的版本

7.2.2 发布上线

1.上传代码

2.后台查看上传的版本

3.发布