小程序（如何创建、基本组成结构、页面组成、常见组件使用、协同开发和发布）

项目结构

pages用来存放所有小程序的页面
utils用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js小程序项目的入口文件
app.json小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件
sitemap.json用来配置小程序及其页面是否允许被微信索引

其中，每个页面由4个基本文件组成，它们分别是:
①js文件(页面的脚本文件，存放页面的数据、事件处理函数等)
②json 文件(当前页面的配置文件,配置窗口的外观、表现等)
③.wxml文件(页面的模板结构文件)
④.Wxss文件(当前页面的样式表文件)

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

①项目根目录中的app.json配置文件：app.json是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

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

②项目根目录中的project.config.json配置文件：project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

setting中保存了编译相关的配置
projectname中保存的是项目名称
appid 中保存的是小程序的账号ID

③项目根目录中的sitemap.json配置文件

微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许
微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页
面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。注意: sitemap的索引提示是默认开启的,如需要关闭sitemap的索引提示，可在小程序项目配置文件
project.configjson的setting中配置字段checkSiteMap为false

④每个页面文件夹中的.json 配置文件

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

创建新页面

只需要在app.json -> pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件

什么是WXML

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

XML和HTML的区别

①标签名称不同

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

②属性节点不同

超链接

③提供了类似于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文件

是普通的功能模块文件， 用来封装公共的函数或属性供页面使用

什么是宿主环境

宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:Android系统和ios系统是两个不同的宿主环境。安卓版的微信App是不能在ios环境下运行的，所以,Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的!

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

①通信模型

小程序中的通信模型分为两部分:
①渲染层和逻辑层之间的通信
●由微信客户端进行转发
②逻辑层和第三方服务 器之间的通信
●由微信客户端进行转发

②运行机制

③组件

④API

通信的主体

小程序中通信的主体是渲染层和逻辑层，其中:
①WXML模板和WXSS样式工作在渲染层
②JS 脚本工作在逻辑层

小程序启动的过程

①把小程序的代码包下载到本地
②解析app.json全局配置文件
③执行appjs小程序入口文件,调用App()创建小程序实例
④渲染小程序首页
⑤小程序启动完成

页面渲染的过程

①加载解析页面的jison配置文件
②加载页面的.wxml模板和.WXss样式
③执行页面的js文件,调用Page()创建页面实例
④页面渲染完成

小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:
①视图容器
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas 画布组件
⑧开放能力
⑨无障碍访问

常用的视图容器类组件

①view普通视图区域
类似于 HTML中的div,是一个块级元素 常用来实现页面的布局效果
②scroll-view可滚动的视图区域
常用来实现滚动列表效果
③swiper 和swiper-item
轮播图容器组件 和轮播图item组件

实例：滚动盒子效果

wxml文件 





A
B
c
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: lightskyblue;
}.container1 view:nth-child(3){
    background-color: lightpink;
}
.container1{
    /* 给scroll-view一个固定高度 */
    border: 1px solid #000;
    height: 120px;
    width: 100px;
}

轮播图写法

wxml文件 




    A


    B

    C
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: lightblue;
}
swiper-item:nth-child(3){
    background-color: lightpink;
}

常用的基础内容组件

①text
●文本组件
●类似于 HTML中的span标签,是一一个行内元素
②rich-text
●富文本组件
●支持把 HTML字符串渲染为WXML结构

常用的基础内容组件 text和和rich-text的用法 


    手机号支持长按选中效果
    136554654646

其它常用组件

①button
按钮组件
● 功能比HTML中的button按钮丰富
●通过 open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
②image
图片组件
●image 组件默认宽度约300px、高度约240px
③navigator
页面导航组件
●类似于HTML中的a链接

按钮组件的基本使用
image组件使用wxml
image组件使用wxss 
image{
    /* 通过边框线证明image有默认的宽和高 */
    border: 1px solid red;
}

小程序API概述

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

小程序API的3大分类

小程序官方把API分为了如下3大类:
1.事件监听API
特点:以on开头，用来监听某些事件的触发
举例: wx.onWindowResize(function callback)监听窗口尺寸变化的事件

2.同步API
特点1∶以Sync结尾的API都是同步API
特点2:同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例:wx.setStorageSync('key' , 'value')向本地存储中写入内容

3.异步API
特点:类似于jQuery 中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果举例: wx.request()发起网络数据请求，通过success回调函数接收数据

小程序开发

相关

[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar

微信小程序开发文档-知识点小记（2）

微信小程序开发笔记

【微信小程序】微信小程序开发入门

微信小程序开发进阶篇（mpvue）

小程序开发，视频播放和下载

小程序开发笔记（八）—Js数组按日期分组显示数据

【艾思软件】微信小程序开发报价方案模版

QQ小程序开发者工具的安装

标签