微信小程序开发

目录

小程序的宿主环境

项目结构

常用的视图容器类组件

常用的内容组件

其他常用组件

API

WXML模板语法

数据绑定

---

小程序的宿主环境

项目结构

1. pages用来存放所有小程序的页面

1. utils 用来存放工具性质的模块（例如:格式化时间的自定义模块)

2. app.js 小程序项目的入口文件

3. app.json 小程序项目的全局配置文件

4. app.wxss 小程序项目的全局样式文件

5. project.config.json 项目的配置文件

6. sitemap.json 用来配置小程序及其页面是否允许被微信索引

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

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

.js文件（页面的脚本文件，存放页面的数据、事件处理函数等)

.json文件（当前页面的配置文件，配置窗口的外观、表现等)

.wxml 文件（页面的模板结构文件)

.wxss文件（当前页面的样式表文件)

app.json文件

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等。Demo项目里边的app.json配置内容如下:

• pages:用来记录当前小程序所有页面的路径

• window:全局定义小程序所有页面的背景色、文字颜色等

• style:全局定义小程序组件所使用的样式版本

• sitemapLocation:用来指明sitemap.json的位置

小程序中.js 文件的分类

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

• app.js

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

• .js 文件

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

• 普通的.js文件

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

常用的视图容器类组件

1. view

• 普通视图区域

• 类似于HTML中的div，是一个块级元素

• 常用来实现页面的布局效果

1. scroll-view

• 可滚动的视图区域

• 常用来实现滚动列表效果

1. swiper和swiper-item

• 轮播图容器组件和轮播图item组件

常用的内容组件

1.text ：

• 文本组件

• 类似于HTML中的span标签，是行内元素

text若要实现长按选中操作需加selectable属性

<text selectable>长按选中复制</text>

2.rich-text

• 富文本标签

• 支持把HTML字符串渲染为WXML结构

通过rich-text组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构:

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

其他常用组件

1.button

• 按钮组件

• 功能比 HTML中的 button按钮丰富

• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等)

<button type="xxx"></button>
<button size="mini"></button>

2.image

• 图片组件

• image组件默认宽度约300px、高度约240px

<image src="/images/1.png"></image>

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下:

3.navigator

• 页面导航组件

• 类似于HTML中的a链接

API

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

WXML模板语法

数据绑定

1. 数据绑定的基本原则

• 在data中定义数据

• 在 WXML中使用数据

2.在data中定义页面的数据

在页面对应的.js 文件中，把数据定义到data对象中即可:

3.Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为:

<view>{{要绑定的数据名称}}</view>

4.Mustache语法的应用场景

Mustache语法的主要应用场景如下:

• 动态绑定内容

页面的数据如下：

Page({
    data:{
        info:'init data'
    }
})

页面结构如下

<view>{{info}}</view>

• 动态绑定属性

页面数据如下：

Page({
    data:{
        imgSRC:"http://vjsknvs/images/logo.png"
    }
})

页面结构如下：

<image src="{{imgSRC}}"></image>

• 运算（三元运算、算术运算等)

三元运算

页面数据如下：

Page({
    data:{
        randomNum:Math.random()*10//生成十以内的随机数
    }
})

页面结构如下：

<view>{{ randomNumber >=5 ? '随机数字大于或等于五' : '随机数字小于五'}}</view>

算术运算

页面数据如下：

Page({
    data:{
        randomNum:Math.toFixed(2)//生成一个两位小数的随机数
    }
})

页面结构如下：

<view>生成100以内的随机数：{{randomNum*100}}</view>