小程序学习记录一：小程序基础认识

偏执的太偏执、 2021-09-07 06:19 681阅读 0赞

### 小程序基础认识 ###

*  一、小程序和网页的区别
 *   *  1.运行环境不同
     *  2.API不同
 *  二、AppID
 *  三、小程序的目录结构
 *   *  1.pages
     *  2.utils文件夹
     *  3.app.js
     *  4.app.json
     *  5.app.wxss
     *  6.project.config.json
     *  7.sitemap.json
 *  四、小程序页面的组成部分
 *   *  1.login.js
     *  2.login.json
     *  3.login.wxml
     *  4.login.wxss
 *  五、json文件的作用
 *  六、新建小程序页面
 *  七、修改小程序项目的首页
 *  八、wxml模板
 *   *  1.标签名称不同
     *  2.属性节点不同
     *  3.提供了类型与vue中的模板语法
 *  九、WXSS
 *   *  1.新增rpx单位
     *  2.提供了全局样式和局部样式
     *  3.仅支持部分的cs选择器
 *  十.js文件
 *   *  1.app.js
     *  2.页面的js文件
     *  3.普通的js文件
 *  十一、宿主环境
 *   *  1.通信模型
     *   *  1.渲染层和逻辑层的通信
         *  2.逻辑层和第三方服务器之间的通信
     *  2.运行机制
     *   *  1.小程序启动过程
         *  2.页面渲染过程
     *  3.组件
     *   *  1.视图容器
         *  2.基础内容组件
         *  3.表单组件
     *  4.API
     *   *  1.事件监听API
         *  2.同步API
         *  3.异步API
 *  十二、小程序发布

# 一、小程序和网页的区别 #

## 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.属性节点不同 ##

## 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**  
轮播图的容器组件  
常用属性

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

### 2.基础内容组件 ###

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

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

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

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

### 3.表单组件 ###

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

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

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

**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回调函数来接收数据。

# 十二、小程序发布 #