微信小程序开发学习(一)

微信小程序开发

微信小程序代码构成

1. .json 后缀的JSON配置文件
2. .wxml 后缀的WXML模板文件
3. .wxss 后缀的WXSS样式文件
4. .js 后缀的JS脚本逻辑文件

JSON 配置

json是一种数据格式，而不是数据语言，在微信小程序中扮演静态配置的角色。

在微信小程序的根目录下有两个.json后缀的文件分别是app.json和project.config.json,在page/logs目录下还有logs.json

app.json

当前小程序的全局配置，包含所有的页面路径、界面表现、网络超时时间、底部tab

以下代码是app.json的举例

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

project.config.json

这是工具配置，当你的工作环境发生改变的时候，只要载入同一个项目的代码包，开发者工具就会自动帮你恢复到当你开发项目时候的个性化配置

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

JSON语法

json文件都是被包裹在一个大括号{}里的，通过key-value的方式来表达数据。json的key必须包裹在一个双引号中

JSON的值只能是一下几种属性否则会报错

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. Null

JSON文件中无法添加注解，添加注解会引发报错

WXML模板

wxml充当的类似html的角色

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

wxml和html的区别

1.标签名字不一样

wxml常用的标签是view、button、tetx等，微信小程序还提供了地图、视频、音频等等的组件能力。

HTML (div,span,img,a)
WXML (view,text,image,navigator)

2.多了一些wx：if这样的属性以及{{ }}这样的表达式

MVVM模式，提倡把渲染和逻辑分离。不要让JS直接操控DOM，JS直接管理状态即可。

在微信小程序中，我们如果想把Hello World字符串显示在界面上

WXML要这样写：

<text>{{msg}}</text>

JS只需要管理状态即可：

this.setData({msg:"Hello World"})

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。

3.提供了类似Vue中的模板语法

​ (1)数据绑定

​ (2)列表渲染

​ (3)条件渲染

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. 新增了尺寸单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

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

   (1).class 和 #id

   (2)element

   (3)并集选择器、后代选择器

   (4)::after和::before等伪类选择器

JS逻辑交互

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

​ (1) app.js

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

​ (2)页面的.js文件

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

​ (3)普通的.js文件

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

宿主环境

宿主环境(host environment)指的是程序运行时所必须的依赖环境

小程序的宿主环境

手机微信是小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页完成不了的功能，例如：

微信扫码、微信支付、微信登陆、地理定位、etc 等等

小程序宿主环境包含的内容

(1)通信的主体

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

​ WXML模板和WXSS样式工作在渲染层

​ JS脚本工作在逻辑层

(2)通信模型

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

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

​ 由微信客户端进行转发

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

​ 由微信客户端进行转发

运行机制

小程序启动的过程

1.把小程序的代码下载到本地

2.解析app.json全局配置文件

3.执行app.js小程序入口文件，调用App()创建小程序实例

4.渲染小程序首页

5.小程序启动完成

页面渲染的过程

1.加载解析页面的.json文件

2.加载页面的.wxml模板和.wxss样式

3.执行页面的.js文件，调用Page()创建页面实例

4.页面渲染完成

组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了九大类

常用到的四类为：

1. 视图容器

   常用的试图容器

   (1)view

   ​ 普通视图区域

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

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

   (2)scroll-view

   ​ 可滚动的视图列表

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

   (3)swiper和swiper-item

   ​ 轮播图的容器组件和轮播图的item组件

2. 基础内容

   常用的基础内容组件

   (1)text

   ​ 文本组件

   ​ 类似于HTML中的span标签，是一个行内元素

   (2)rich-text

   ​ 富文本组件

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

3. 表单组件

4. 导航组件

5. 其他常用组件

   (1)button

   ​ 按钮组件

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

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

   (2)image

   ​ 图片组件

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

   (3)navigator

​ 页面导航组件

​ 类似于HTML中的a链接

API

小程序API的三大分类

​ 1.事件监听API

​ 特点：以on为开头，用来监听某些事件的触发

​ 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

​ 2.同步API

​ 特点一：以Sync结尾的API都是同步API

​ 特点二：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错可能会抛出异常

​ 举例：wx.setStorageSync(‘key’,‘value’)向本地存储中写入内容

​ 3.异步API

​ 特点：类似于jQuery中的$.ajax(option)函数，需要通过success、fail、complate接受调用的结果

​ 举例：wx.request()发起网络数据请求，通过success回调函数接收数据