文章和代码曾经归档至【Github仓库：https://github.com/timerring/front-end-tutorial 】或者公众号【AIShareLab】回复 小程序 也可获取。

我的项目构造

理解我的项目的根本组成构造

  1. pages 用来寄存所有小程序的页面
  2. utils 用来寄存工具性质的模块（例如：格式化工夫的自定义模块）
  3. app.js 小程序我的项目的入口文件
  4. app.json 小程序我的项目的全局配置文件
  5. app.wxss 小程序我的项目的全局款式文件
  6. project.config.json 我的项目的配置文件
  7. sitemap.json 用来配置小程序及其页面是否容许被微信索引

小程序页面的组成部分

小程序官网倡议把所有小程序的页面，都寄存在 pages 目录 中，以独自的文件夹存在，如图所示：

其中，每个页面由 4 个根本文件 组成，它们别离是：

  1. .js 文件（页面的脚本文件，寄存页面的数据、事件处理函数等）
  2. .json 文件（以后页面的配置文件，配置窗口的外观、体现等）
  3. .wxml 文件（页面的模板构造文件）
  4. .wxss 文件（以后页面的样式表文件）

json配置文件的作用

json是一种数据格式，在理论开发中，json总是以 配置文件的模式呈现。小程序我的项目中也不例外：通过不同的.json配置文件，能够对小程序我的项目进行不同级别的配置。

小程序我的项目中有4种json配置文件，别离是：

  • 我的项目根目录的app.json配置文件；
  • 我的项目根目录中的project.config.json配置文件；
  • 我的项目根目录中的sitemap.json配置文件；
  • 每个页面文件夹中的.json配置文件

全局配置文件app.json

app.json是以后小程序的全局配置 ，包含了小程序的所有页面门路 、窗口外观、界面体现 、底部 tab 等。

app.json 中的局部配置，也反对对单个页面进行配置，能够在页面对应的 .json 文件来对本页面的体现进行配置。页面中配置项在以后页面会笼罩 app.json 中雷同的配置项。

{  "pages":[    "pages/index/index",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light", //加载小圆圈的色彩    "navigationBarBackgroundColor": "#fff", //导航栏背景色彩    "navigationBarTitleText": "Weixin", //导航栏的文本内容    "navigationBarTextStyle":"black" //导航栏题目色彩，仅反对 black / white  },  "style": "v2",  "sitemapLocation": "sitemap.json"}

这 4 个配置项的作用：

  1. pages ：用来记录以后小程序所有页面的门路

    未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

    小程序中新增/缩小页面，都须要对 pages 数组进行批改。

  2. window ：全局定义小程序所有页面的背景色、文字色彩等
  3. style ：全局定义小程序组件所应用的款式版本
  4. sitemapLocation ：用来指明 sitemap.json 的地位

project.config.json文件

文件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": ""    },    "condition": false  },  "compileType": "miniprogram",  "libVersion": "2.19.4",  "appid": "",  "projectname": "miniprogram-92",  "condition": {},  "editorSetting": {    "tabIndent": "insertSpaces",    "tabSize": 2  }}

sitemap.json 文件

微信现已凋谢小程序内搜寻 ，成果相似于PC 网页的 SEO 。sitemap.json 文件用来配置小程序页面是否容许微信索引 。

当开发者容许微信索引时，微信会通过爬虫的模式，为小程序的页面内容建设索引。当用户的搜寻关键字和页面的索引匹配胜利的时候，小程序的页面将可能展现在搜寻后果中。

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

留神：未显式指明 "disallow" 的都默认被索引

sitemap 的索引提醒（终端黄色正告）是默认开启的，如须要敞开 sitemap 的索引提醒，可在小程序我的项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。

页面的 .json 配置文件

小程序中的每一个页面，能够应用 .json 文件来 对本页面的窗口外观进行配置 ，页面中的配置项会笼罩 app.json 的 window 中雷同的配置项。

新建小程序页面

只须要在 app.json -> pages 中新增页面的寄存门路，小程序开发者工具即可帮咱们主动创立对应的页面文件。

  "pages":[    "pages/index/index",    "pages/list/list",    "pages/logs/logs"  ],

批改我的项目首页

只须要调整 app.json -> pages 数组中页面门路的前后程序，即可批改我的项目的首页。小程序会把排在第一位的页面，当作我的项目首页进行渲染。

WXML 模板

什么是 WXML

WXML（WeiXin Markup Language ）是小程序框架设计的一套标签语言 ，用来构建小程序页面的构造 ，其作用相似于网页开发中的 HTML 。

WXML和HTML的区别

  1. 标签名称不同

    HTML(div, span, img, a)

    WXML(view, text, image, navigator)

  2. 属性节点不同

    <a href="#"></a>

    \`\`<navigator url="pages/home/home"></navigator>\`

  3. 提供了相似于Vue中的模块语法

    数据绑定

    列表渲染

    条件渲染

WXSS 款式

WXSS (WeiXin Style Sheets)是一套款式语言 ，用于形容 WXML 的组件款式，相似于网页开发中的 CSS 。

WXSS和CSS的区别

新增了rpx尺寸单位

  • CSS须要手动进行像素单位换算，例如rem
  • WXSS在底层反对新的尺寸单位rpx，在不同大小屏幕小程序会主动进行换算

提供了全局的款式和部分款式

  • 全局：我的项目根目录中的app.wxss
  • 部分：以后页面的.wxss

WXSS仅反对局部CSS选择器

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

JS逻辑交互

通过.js 文件来解决用户的操作。例如：响应用户的点击、获取用户的地位等等。

小程序中的JS文件分为三大类，别离是:

app.js

  • 是整个小程序我的项目的入口文件，通过调用App()函数来启动整个小程序

页面的.js 文件

  • 是页面的入口文件，通过调用Page()函数来创立并运行页面

一般的.js 文件

  • 是一般的功能模块文件，用来封装公共的函数或属性供页面应用

小程序宿主环境

宿主环境就是依赖环境，小程序的宿主环境是手机微信

次要蕴含四个内容：通信模型，运行机制， 组件， API

通信模型

通信的主体：渲染层 和 逻辑层

小程序中的通信模型分为两局部:

渲染层和逻辑层之间的通信由微信客户端进行转发。

逻辑层和第三方服务器之间的通信由微信客户端进行转发。

运行机制

小程序启动的过程

  1. 把小程序的代码包下载到本地
  2. 解析 app.json 全局配置文件
  3. 执行 app.js 小程序入口文件， 调用 App() 创立小程序实例
  4. 渲染小程序首页
  5. 小程序启动实现

页面渲染的过程

  1. 加载解析页面的 .json 配置文件
  2. 加载页面的 .wxml 模板和 .wxss 款式
  3. 执行页面的 .js 文件， 调用 Page() 创立页面实例
  4. 页面渲染实现

组件

小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者能够基于组件疾速搭建出丑陋的页面构造。官网把小程序的组件分为了 9 大类，别离是：

  1. 视图容器
  2. 根底内容
  3. 表单组件
  4. 导航组件
  5. 媒体组件
  6. map 地图组件
  7. canvas 画布组件
  8. 凋谢能力
  9. 无障碍拜访

罕用的视图容器类组件

  1. view

    一般视图区域，相似于HTML中的div，是一个块级元素，罕用来实现页面的布局成果。

    实现如图的 flex 横向布局

  2. scroll-view

    可滚动的视图区域，罕用来实现滚动列表成果。

    • scroll-y 或 scroll-x属性：规定在哪个方向滚动
    • 要给swiper容器设置指定的高度或宽度才能够实现滚动
    <scroll-view class="container1" scroll-y>  <view>A</view>  <view>B</view>  <view>C</view></scroll-view>
    /* pages/list/list.wxss */.container1 view {  width: 100px;  height: 100px;  text-align: center;  line-height: 100px;}.container1 view:nth-child(1) {  background-color: lightgreen;}.container1 view:nth-child(2) {  background-color: lightskyblue;}.container1 view:nth-child(3) {  background-color: lightpink;}.container1 {  border: 1px solid red;  width: 100px;  height: 120px;}

  3. swiper 和 swiper-item

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

    <swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>    <swiper-item>    <view class="item">A</view>  </swiper-item>    <swiper-item>    <view class="item">B</view>  </swiper-item>    <swiper-item>    <view class="item">C</view>  </swiper-item></swiper>
    .swiper-container {  height: 150px;}.item {  height: 100%;  line-height: 150px;  text-align: center;}swiper-item:nth-child(1) .item {  background-color: lightgreen;}swiper-item:nth-child(2) .item {  background-color: lightskyblue;}swiper-item:nth-child(3) .item {  background-color: lightpink;}

    swiper组件的罕用属性

    属性类型默认值阐明
    indicator-dotsbooleanfalse是否显示面板批示点
    indicator-colorcolorrgba（0,0,0,.3）批示点色彩
    indicator-active-colorcolor#000000以后选中的批示点色彩
    autoplaybooleanfalse是否主动切换
    intervalnumber5000主动切换工夫距离
    circularbooleanfalse是否采纳连接滑动

根底内容组件

  • text：相似于 HTML 中的 span 标签，是一个行内元素。

    <view>  手机号反对长按选中成果  <text selectable>13800005056</text></view>

    • selectable属性：实现长按选中文本内容。

  • rich-text：富文本组件，反对把 HTML 字符串渲染为 WXML 构造。

    <rich-text nodes="<h1 style='color: red;'>题目</h1>"></rich-text>

    • nodes属性：把HTML字符串渲染为对应的UI构造。

其它罕用组件

  • button

    <!-- 按钮组件的根本应用 --><!-- 通过 type 属性指定按钮色彩类型 --><button>一般按钮</button><button type="primary">主色调按钮</button><button type="warn">正告按钮</button><!-- size="mini" 小尺寸按钮 --><button size="mini">一般按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">正告按钮</button><!-- plain 镂空按钮 --><button size="mini" plain>一般按钮</button><button type="primary" size="mini" plain>主色调按钮</button><button type="warn" size="mini" plain>正告按钮</button>
    • open-type属性：能够调用微信提供的各种性能（客服、转发、获取用户受权、获取用户信息等）

    • type属性：指定按钮色彩类型

      • primary：主色调按钮，绿色
      • warn：正告按钮，红色

    • size属性：

      • mini：小尺寸按钮
    • plain属性：镂空按钮

  • image

    <!-- image 图片组件 --><image></image><image src="/images/1.png" mode="heightFix"></image>
    • 默认宽度300px，高度240px

    • mode属性：指定图片的裁剪和缩放模式

      • scaleToFill：默认值，缩放模式，不放弃纵横比缩放图片，使齐全填满image元素
      • aspectFit：放弃纵横比缩放，将图片残缺显示进去
      • aspectFill：放弃纵横比缩放，使齐全填满image元素，然而可能产生裁剪
      • widthFix：宽度不变，高度主动变动，放弃宽高比不变
      • heightFix：高度不变，宽度主动变动，放弃宽高比不变

  • navigator

    • 页面导航组件，相似于a链接

API

小程序官网把API分成三大类

1.事件监听API

  • 特点：以on结尾，用来监听某些事件的触发

    举例：wx.onWindowResize(function callback)监听窗口尺寸变动的事件

2.同步API

  • 特点：以Sync结尾的API都是同步API，其执行后果能够通过函数返回值间接获取，如果执行出错会抛出异样
  • 举例：wx.setStorageSync('key','value')向本地存储中写入内容

3.异步API

  • 特点：相似于jQuery中的$.ajax(optjions)函数，须要通过success、fail、complete承受调用的后果
  • 举例：wx.request()发动网络数据申请，通过success回调函数接收数据。

小程序成员治理

我的项目成员 ：

  • 示意参加小程序开发、经营的成员
  • 可登录小程序管理后盾
  • 管理员能够增加、删除我的项目成员，并设置我的项目成员的角色

体验成员 ：

  • 示意参加小程序内测体验的成员
  • 可应用体验版小程序，但不属于我的项目成员
  • 管理员及我的项目成员均可增加、删除体验成员

不同我的项目成员对应的权限

开发者的权限阐明

  1. 开发者权限 ：可应用小程序开发者工具及对小程序的性能进行代码开
  2. 体验者权限 ：可应用体验版小程序
  3. 登录权限 ：可登录小程序管理后盾，无需管理员确认
  4. 开发设置 ：设置小程序服务器域名、音讯推送及扫描一般链接二维码关上小程序
  5. 腾讯云治理：云开发相干设置

小程序的版本

公布上线

一个小程序的公布上线，个别要通过 上传代码 -> 提交审核 -> 公布 这三步。

上传代码

  1. 点击开发者工具顶部工具栏中的“ 上传 ” 按钮
  2. 填写 版本号 以及 我的项目备注

在后盾查看上传之的版本

登录小程序管理后盾 -> 治理 -> 版本治理 -> 开发版本 ，即可查看方才提交上传的版本：

提交审核

提交审核的形式：在开发版本的列表中，点击“ 提交审核 ”按钮之后，依照页面提醒填写相干的信息，就能把小程序提交到官网进行审核。

公布

审核通过之后，管理员的微信中会收到小程序通过审核的告诉，此时在审核版本的列表中，点击“公布 ”按钮之后，即可把“ 审核通过 ”的版本公布为 线上版本 ”，供所有小程序用户拜访和应用。

基于小程序码进行推广

获取小程序码的 5 个步骤：登录小程序管理后盾 -> 设置 -> 根本设置 -> 根本信息 -> 小程序码及线下物料下载。