微信小程序1（代码构成和基础组件和协同开发）_pad端小程序共用一套代码

小程序代码构成

项目的基本组成结构

• pages 用来存放所有小程序页面
• utils 用来存放工具性模块
• app.js 小程序项目的入口文件
• app.json 小程序项目的全局配置文件
• app.wxss 小程序项目的全局样式文件
• project.config.json 项目的配置文件
• sitmap.json 用来配置小程序是及其页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有小程序的页面，都存放在pages目录中，以单独的文件夹存在

其中每个页面由4个基本文件组成

• .js文件 （页面的脚本文件，存放页面的数据，事件处理函数等）
• .json文件 （当前页面的配置文件，配置窗口的外观，表现等）
• .wxml文件（页面的模板结构文件）
• .wxss文件 （当前页面的样式表文件）

.json配置文件

JSON配置文件的作用

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

小程序中.json配置文件

app.json文件

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

{
  "pages":[
    "pages/list1/list1",
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4个配置项的作用

• pages 用来记录当前小程序所有页面的路径
• windows 全局定义小程序的背景色、文字颜色等
• style 全局定义小程序组件所使用的样式版本
• sitemapLocation 用来指明sitmap.json位置

project.config.json文件

项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

中间代码对应左边的按键配置信息

sitmap.json

sitmap.json页面用来配置小程序是否能够被微信索引
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词和页面的索引匹配时，小程序可能会展示在用户的搜索结果中

sitmap.json的索引是默认开启的，
可以在 project.config.json的setting中配置字段checkSiteMap为false去禁用

页面.json

可以使用单当前页面.json文件来对当前页面的窗口外观进行配置，页面中的配置项会覆盖掉app.json的window中相同的配置项

WXML模板

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

HTML和WXML的区别

1. 标签名称不同

• HTML (div, span, img, a)
• wxML ( view, text, image, navigator)

2. 属性节点不同

<a href="#">超链接</a>
1

<navigator url="/pages/home/home"></navigator>s
1

3. 提供了类似于vue中的模板语法

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

WXSS样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS.

WXSS和CSS的区别

1. 新增了rpx尺寸单位

• CSS中需要手动进行像素单位换算，例如rem
• WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

2. 提供了全局的样式和局部样式

• 项目根目录中的app.wxSs会作用于所有小程序页面
• 局部页面的.WXSS样式仅对当前页面生效

3. WXSS仅支持部分CSS选择器

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

JS逻辑交互

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过.js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

小程序中.js 文件的分类

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

1. app.js
   是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
2. 页面的.js 文件
   是页面的入口文件，通过调用Page()函数来创建并运行页面
3. 普通的.js 文件
   是普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境

宿主环境(host environment)指的是程序运行所必须的依赖环境。

小程序宿主环境包含的内容

1. 通信模型
2. 运行机制
3. 组件
4. APl

通信的主体

小程序中通信的主体是渲染层和逻辑层，其中:

1. WXML模板和WXSS样式工作在渲染层
2. JS脚本工作在逻辑层

小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是:

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

组件

view

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

.wxml

<!--pages/list/list.wxml-->
<view class = "container1">
<view>A</view>
<view>B</view>
<view>c</view>
</view>

1
2
3
4
5
6
7

.wxss

/* 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: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightskyblue;
}
.container1{
  display: flex; 
  justify-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

表示横屏显示

 display: flex; 
1

scroll-view

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

<!--pages/list/list.wxml-->
<scroll-view class = "container1" scroll-y>
<view>A</view>
<view>B</view>
<view>c</view>
</scroll-view>

1
2
3
4
5
6
7

/* 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: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightskyblue;
}
.container1{
 broder:1px solid red;
 width:100px;
 height:120px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

swiper

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

常用属性

• indicator-dots 是否显示面板指示点 （默认是否）
• indicator-color 面板指示点颜色
• indicator-active-color 当前选中页面指示点的颜色
• autoplay 是否自动轮播
• interval 每次轮播的时间 类型是Number 默认是5000 单位是毫秒
• circular 是否采用衔接滑动 （如果不写这个属性，到了最后一张会倒着滑动，写了就是连接第一张图片播放）

<!--pages/list1/list1.wxml-->
<swiper class="swiper-container">
<!-- 轮播图1 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 轮播图2 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 轮播图3 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* pages/list1/list1.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1){
  background-color: lightgreen;
}
swiper-item:nth-child(2){
  background-color: lightpink;
}
swiper-item:nth-child(3){
  background-color: lightblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

常用的基础内容控件

text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素
• 可以通过text组件的selectable属性，实现长按选中文本内容的效果
  .wxml

<view>
手机号支持长按选中效果
<text selectable>3r427165236152</text>
</view>
1
2
3
4

rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构
• 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标签</h1>"></rich-text>
1

其它常用组件

button

• 按钮组件
• 功能比HTML中的button按钮丰富
• 通过open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
  .wxml

<!-- 按钮组件的基本使用 -->
<button>普通按钮</button>
<!-- 通过type属性指定按钮颜色类型 -->
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

image

• 图片组件
• image组件默认宽度为300px、高度为240px
• image组件的mode属性用来指定图片的裁剪和缩放模式，常用mode属性值如下：

1. scaleToFill 默认值 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
2. aspectFill 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
3. aspectFill 缩放模式 保持纵横比缩放图片，只能保证图片地短边能完全显示出来，也就是说，图片通常只能在水平或垂直方向是完整地，另一个方向将会发生截取
4. widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
5. heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

<!--pages/list3/list3.wxml-->
<!-- image图片组件 -->
<!-- 空图片也占位置 -->
<image></image>
<image src="/images/测试.png" mode="widthFix"></image>

1
2
3
4
5
6

/* pages/list3/list3.wxss */
/* 给图片加个边框线 */
image{
  border:1px solid red;
}
1
2
3
4
5

navigator (后续补充）

• 页面导航组件
• 类似于HTML中的a链接

小程序的宿主环境-API

概述

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力

小程序API的3大分类

事件监听API

特点：以on开头，用来监听某些事件的触发

同步API

• 特点1：以Sync结尾的API都是同步API
• 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

异步API

特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果

协同工作和发布

协同工作和发布-协同工作

小程序开发流程

协同工作和发布-小程序成员管理

小程序成员管理体现在管理员对小程序项目成员及体验成员的管理

项目成员

• 表示参与小程序开发、运营的成员
• 可登录小程序管理后台
• 管理员可以添加、删除项目成员，并设置项目成员及体验成员的管理

体验成员

• 表示参与小程序内测体验的成员
• 可使用体验版小程序，但不属于项目成员
• 管理员及项目成员均可添加、删除体验成员

不同项目成员对应的权限

开发者权限说明

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