微信小程序开发笔记

项目结构

项目基本组成结构

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

每个页面由4个基本文件组成：.js文件 .json文件 .wxml文件 .wxss文件

JSON配置文件

JSON是一种数据格式，在实际开发中，JSON总以配置文件的形式出现

小程序项目中由4种json配置文件：

1. 项目根目录中的app.json配置文件：包括了小程序的

• pages所有页面路径，
• window所有页面背景色、文字颜色，
• style组件使用的样式版本，
• sitemapLocation指明sitemap.json位置

2. 项目根目录中的project.config.json配置文件：

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

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

4. 每个页面文件夹中的 .json配置文件：
   可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项

关闭终端黄色警告：project.config.json文件中的setting,更改"checkSiteMap": true为false

认识页面

新建小程序页面

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

修改项目首页

默认排在第一位的路径为项目首页

WXML

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和CSS的区别

1. 新增了rpx尺寸单位

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

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

• 全局：项目根目录中的app.wxss
• 局部：当前页面的.wxss

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

JS逻辑交互

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

1. app.js

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

2. 页面的.js 文件

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

3. 普通的.js 文件

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

小程序宿主环境

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

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

通信模型

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

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

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

• 由微信客户端进行转发

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

• 由微信客户端进行转发

运行机制

组件

官方把小程序的组件分为9大类，常用四大类：

1. 视图容器

• view
• scroll-view
  • scroll-y 或 scroll-x属性：规定在哪个方向滚动
  • 要给swiper容器设置指定的高度或宽度才可以实现滚动
• swiper和swiper-item
  • indicator-dots属性：显示面板指示点
  • atuoplay属性：自动切换
  • interval属性：设置切换间隔，单位为毫秒
  • circular属性：衔接滑动，最后一张轮播图时跳回第一张

2. 基础内容

• text
  • selectable属性：实现长按选中文本内容
• rich-text
  • nodes属性：把HTML字符串渲染为对应的UI结构，如<rich-text nodes="<h1 style='color:red;'>标题</h1>"</rich-text>

3. 表单组件

4. 导航组件

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

其它常用组件：

• button
  • open-type属性：可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
  • type属性：指定按钮颜色类型
    • primary：主色调按钮，绿色
    • warn：警告按钮，红色
  • size属性：
    • mini：小尺寸按钮
  • plain属性：镂空按钮
• image
  • 默认宽度300px，高度240px
  • mode属性：指定图片的裁剪和缩放模式
    • scaleToFill：默认值，缩放模式，不保持纵横比缩放图片，使完全填满image元素
    • aspectFit：保持纵横比缩放，将图片完整显示出来
    • aspectFill：保持纵横比缩放，使完全填满image元素，但是可能发生裁剪
    • widthFix：宽度不变，高度自动变化，保持宽高比不变
    • heightFix：高度不变，宽度自动变化，保持宽高比不变