微信小程序学习笔记

小程序项目结构

一.了解项目的基本组成结构

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

二.小程序页面的组成部分

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

其中，每个页面由4个基本文件组成，它们分别是：

1. .js文件(页面的脚本文件，存放页面的数据，事件处理函数等)
2. .json文件(当前页面的配置文件，配置窗口的外观、表现等)
3. .wxml文件(页面的模版结构)
4. .wxss文件(当前页面的样式表文件)

三.json配置文件

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

小程序项目中有4种json配置文件，分别是：

• 项目根目录中的app.json配置文件
• 项目根目录中的project.config.json配置文件
• 项目根目录中的sitemap.json配置文件
• 每个页面文件夹中的.json配置文件

1.app.json

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

navigationBarBackgroundColor：导航栏背景颜色，如 #000000，#666，十六进制颜色 navigationBarTextStyle：导航栏标题颜色，仅支持 black / white

修改项目首页：调整app.json中pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面当做项目首页进行渲染。

在app.json文件中的"pages"属性中，直接写"pages/my/my"，然后保存，项目会自动创建my文件夹

2.project.config.json

project.config.json是项目配置文件，用来记录小程序开发工具所做的个性化配置，例如：

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

3.sitemap.json

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

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

四.WXML模版

1.wxml 和 html的区别

标签名称不同

• html（div、span、img、a）
• wxml（view、text、image、navigator）

属性节点不同

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

<navigator url="/pages/index/index"></navigator>

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

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

2.wxss 和 css的区别 

wxss还有： @import样式导入

五.小程序中js文件分类

小程序宿主环境

宿主环境包括 通信模型、运行机制、组件、API

1.通信模型

小程序通信的主体是渲染层和逻辑层。 

2.运行机制

小程序启动的过程：

 页面渲染的过程： 

3.组件

小程序中组件的分类：网址如下 developers.weixin.qq.com/miniprogram…

常用的视图容器类组件

swiper和swiper-item组件的基本使用:

swpier组件的常用属性：

常用的基础内容组件

长按复制的话：要在text标签中添加selectable属性
<text user-select="true">文本组件text</text>
rich-text富文本可以添加nodes属性：
<rich-text nodes="<h3 style='color:pink;'>富文本框</h3>"></rich-text>

其他常用组件

 

4.API

小程序API的3大分类：

正式开始学习小程序开发内容

一、wxml模板语法

1.数据绑定

基本原则： 在data中定义数据，在wxml中使用数据。

动态绑定的时候和vue不同【vue中是在src前加：，且imgSrc不加{ { }}】。但在小程序中无论是内容还是属性都要加{ { }}

//页面结构
<image src="{
  {imageSrc}}" mode="widthFix"></image>

//页面数据
Page({
  data: {
    imageSrc:'xxx'
  },
})

2.事件绑定

（1）小程序中常用的事件：

（2）事件对象的属性列表：

taeget 和 currentTarget的区别：

（3）bindtap的语法格式：

在小程序之中，不存在html中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

// 通过bindtap，为组件绑定 tap 触摸事件
<button type="primary" bindtap="changCount">按钮</button>

// 在js文件中定义函数，事件参数通过形参 event(一般写成e)来接收
Page({
  changCount(e){ 
    console.log(e); //事件参数对象 e
  },
})

（4）在事件处理函数中为data中的数据赋值：

通过调用 this.setData(dataObject)方法。

Page({
  data: {
    count:1
  },
  // 修改count的值
  changCount(){
    this.setData({
      count:this.data.count+1
    })
  },
})

（5）事件传参：

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

// 错误写法
<button type="primary" bindtap="tapHandle(123)">事件传参</button>

//小程序会把bindtap的属性值，统一当成事件名称来处理，
//相当于事件名为 tapHandle(123)。

解决办法：可以为组件提供 dada-* 自定义属性传参，其中 * 代表的