小程序基础认识

一、小程序和网页的区别

1.运行环境不同

小程序运行在微信环境中
网页运行在浏览器环境中

2.API不同

小程序中无法调用DOM和BOM的API
但是小程序可以调用微信环境提供的各种API
比如地理定位
扫码
和支付。

3.开发模式不同
网页是浏览器加代码编辑器
小程序是申请小程序开发账号
安装小程序开发工具
创建和配置小程序项目。

二、AppID

在注册好小程序开发账号后，需要使用这个AppID来新创建一个小程序

三、小程序的目录结构

'/'表示根目录路径

1.pages

用来存放页面

2.utils文件夹

工具函数文件夹，

3.app.js

小程序的入口文件

4.app.json

小程序项目的全局配置文件
包括小程序所有页面的路径、窗口外观、界面表现、底部tab等。

{
    
    
 "pages":[

],
//用来记录当前小程序所有的页面路径
"window":{
    
    

}
//全局定义小程序所有页面的背景色，文字颜色等，
},
"style":"v2"
//全局定义小程序组件所使用的样式版本，v2表示最新的，不要最新的删除这个style节点即可。

"sitemapLocation":"sitemap.json"
//指明sitemap.json的文件位置，这么写是平级

5.app.wxss

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

6.project.config.json

也是项目的配置文件，是对小程序开发工具的个性化配置。

{
    
    
 "description":"项目配置文件",
 //这个文件的描述
  "packOptions":{
    
    
        "ignore":[]
},
  "setting":{
    
    
    
} 
//这里是个性化配置,和小程序的本地配置互相影响。本地配置是可视化的setting节点。
  "projectname":"ss"
      //这个不是小程序名称,是当前项目的名称，小程序的名称在后台配置。
"appid":"sssss"
//要把appid改成自己的id才能使用这个配置文件作为自己的。
"checkSiteMap":"false"
//关闭索引提示
      

}

7.sitemap.json

用来配置小程序及其页面是否允许被微信索引
类似于PC网页的SEO
百度的搜索结果排序就是seo优化导致的。
允许索引后，微信会通过爬虫的方式，为小程序的页面建立索引，当用户搜索的 关键字和页面的索引匹配成功后，小程序的页面肯展示在搜索结果中。

{
    
    
 "desc":""
 "rules":[
      {
    
    
    "action":"allow",
    //disallow是不被索引
    "page":"*"
    //表示所有页面都能被索引
}
]

}

setting的索引提示默认是开启的，要关闭要到project.config.json的setting的字段里配置
checkSiteMap:false

四、小程序页面的组成部分

小程序的每个页面都有一个文件夹组成，都存放在pages文件夹中，便于管理。每个页面文件夹格式一致，都有4个文件。这4个文件组成一个页面。
比如登录页面login文件夹

1.login.js

页面的脚本文件，存放的数据和函数，即业务逻辑

2.login.json

配置当前页面的外观和表现
这里的配置会覆盖全局的app.json的window里相同的样式
这里配置的只会被当前页面使用

3.login.wxml

页面的模板结构文件

4.login.wxss

页面的样式表文件

五、json文件的作用

json是一种格式，无论是网页还是小程序，json文件都是以一种配置文件来出现的。小程序通过json文件来配置项目。

六、新建小程序页面

只需要在app.json文件的pages字段里，新增页面的路径，小程序开发工具就会自动帮我们创建对应的一个文件夹，包含了4个文件

{
    
    
 "page":{
    
    
      "pages/list/list"
      //要写到list文件夹里的list这一层
}
}

七、修改小程序项目的首页

只需要修改app.json里page字段里路径的顺序即可，谁在第一个，谁就是首页。

八、wxml模板

微信ML是小程序框架的一种标签语言，专门用来构建小程序页面的结构的，类似于html
和html的区别

1.标签名称不同

wxml一般标签是
view 对应div
text 对应span
image 对应image
navigator 对应a标签

2.属性节点不同

<navigator url="指定跳转的页面"></navigator>

3.提供了类型与vue中的模板语法

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

九、WXSS

是样式语言，和css有一定的区别

1.新增rpx单位

pc端需要手动的单位换算，使用rem
wxss新增rpx，会在不同大小的屏幕上进行自动的换算。

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

项目根目录的app.wxss会作用于所有的页面
局部页面的.wxss只会作用于当前页面

3.仅支持部分的cs选择器

.class和#id
element
并集选择器和后代选择器
::after和::before伪类选择器等都支持

十.js文件

1.app.js

是整个小程序项目的入口文件，通过APP()函数来启动整个目录。

2.页面的js文件

是页面的入库文件，通过Page()函数就能创建并运行对应的页面。

3.普通的js文件

是用来封装公共的函数，来供所有页面使用。

module.exports = {
    
    
      方法名
}

来暴露这个模块对象

引用使用

require('文件路径即可')

获得的是模块对象
模块对象.方法名调用这个方法

十一、宿主环境

宿主环境(host enviroment)
程序运行所必须的依赖环境。
小程序的宿主环境是微信，可以借助微信完成许多功能。
微信给小程序提供了一些功能

1.通信模型

通信模型分为两部分

1.渲染层和逻辑层的通信

即wxml和wxss与js脚本之间的数据通信是由微信客户端进行转发

2.逻辑层和第三方服务器之间的通信

也是由微信客户端进行转发的。这个才能和服务器获取数据，返回给js脚本，进行处理。

由微信客户端进行转发

2.运行机制

运行机制分为小程序的启动过程和渲染过程

1.小程序启动过程

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

2.页面渲染过程

①加载分析页面的.json配置文件
②加载页面的.wxml模板和.wxss样式
③执行页面的.js文件，调用Page(）创建页面实例
④页面渲染完成

3.组件

组件也是由宿主环境提供的，可分为9大类

1.视图容器

①view
普通的视图容器，相当于div
是块级元素
常用来实现页面的布局效果

②scrol-view
可滚动的视图容器
可用来实现菜单栏
scroll-y表示纵向滚动
scroll-x表示横向滚动

③swip和swiper-item
轮播图的容器组件
常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面把上的小点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中指示点颜色
autopaly	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动，即到最后一张会自动到第一张

2.基础内容组件

①text标签
相当于span
是行内元素
常用属性

属性	类型	默认值	说明
selectable	boolean	false	实现长按选中文本内容，只有text组件支持长按选中，只能通过真机预览

②rich-text标签
富文本组件
支持把html字符串渲染为wxml对应的ui结构

属性	类型	默认值	说明
nodes	字符串	无	将写在这里的html文本转换为对应的wxml组件 ，可以将服务器返回的一些html标签进行转换

3.表单组件

1.button组件
比html的button功能更多
可通过open-type属性调用微信的各种功能（客服，转发，获取用户授权，获取用户信息等）

2.image组件
组件默认有一个宽高，宽300px，高240px左右。
mode值来指定图片的裁剪和缩放，会撑大image组件，小心使用

mode值	说明
scaleTofill	默认值，缩放模式，不保持纵横比缩放图片，是图片的宽高完全拉伸填满image元素
aspecFit	缩放模式。保持纵横比缩放图片，使图片的长边完全能显示出来，
aspectFill	缩放模式。保持纵横比缩放图片，只保证图片的短边能完全显示出来，也就是说，图片只在水平或垂直方向是完整的，另一个方向将发生截取
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式。高度不变，宽度自动变化，保持原图宽高比不变

3.navigator组件
类似于导航组件
类似于html的a标签

4.导航组件
5.媒体组件
6.map地图组件
7.canvas画布组件
8.开发能力
9.无障碍访问

4.API

通过API可以获取用户信息和调用微信的功能

1.事件监听API

以on开头，监听某些事件的触发
wx是小程序的顶级对象，相当于pc端网页的window对象
wx.onWindowResize(function(){})，监听窗口尺寸变化的事件

2.同步API

1.以Sync结尾的API都是同步API
2.同步API的执行结果，可以通过函数返回值来获取，执行出错会抛出异常
例子

wx.serStorageSync('key','value')//向本地存储中写入内容

3.异步API

类似于jq中的$.ajax(options)函数，通过success，fail,complete来接收调用的结果
例子
wx.request()发起网络请求，通过success回调函数来接收数据。

十二、小程序发布

1.点击上传按钮
2.在后台查看上传的版本，上传的版本属于开发版本
3.提交给腾讯审核，保证质量和规范
4.通过后，在身后版本里点击发布按钮，
5.即可发布到线上。
6.推广小程序，分为普通二维码和小程序二维码。
7.在设置-基本设置-基本信息-下载小程序二维码。