小程序安装开发环境

安装开发环境

1.申请地址：

进入小程序注册页（https://mp.weixin.qq.com/wxopen/waregister?action=step1） 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

2.获得AppID ：

登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

3.下载地址:

前往 开发者工具下载页面（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19052420） ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序开发者工具，用微信扫码登录开发者工具，

工具的界面介绍

1.编辑：

默认为编辑状态显示，下面的编译为手动编译功能，通常情况下修改文件后保存会刷新界面显示，如果修改的是.js文件，保存时会自动进行编译和刷新界面显示

2.调试：

通过界面我们可以看出编辑状态的菜单栏与chrome浏览器的调试界面几乎相同，包括控制台、源码、网络等，并且支持断电调试，功能几乎与前端开发调试类似调试的时候，菜单栏下面会多出一个后台和缓存按钮

3.项目：

显示当前项目信息

4.编译：

修改代码之后，如果没有设置自动检测刷新可以在这里手动重新编译

5.后台：

是模拟程序运行到后台（按Home键回到主页面，不是退出程序）时的执行情况，进入后台时再次点击会进入前台执行。

6.缓存：

数据的本地缓存，可以在这里进行清除缓存等操作。

在app.json全局配置信息

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，

1.pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

2.window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

3.tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象

4.networkTimeout

各类网络请求的超时时间，单位均为毫秒

5.debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

页面，工具配置

页面配置 page.json：

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象

工具配置 project.config.json：

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

配置文件注意事项：

1.不能有注释符号

2.最有一项不能有逗号（,）

小程序逻辑层

1.data

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过 WXML 对数据进行绑定。

2.生命周期回调函数

onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。

onHide()

页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()

页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

3.页面事件处理函数

onPullDownRefresh()

监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()

监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

在触发距离内滑动期间，本事件只会被触发一次。

4.setData

用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值，直接修改this.data无效，且会造成数据不一致，单次设置的数据不应超过1024kb

小程序视图层

数据绑定

1.特点

WXML 中的动态数据均来自对应 Page 的 data。也就是说js与页面，js中函数函数的值传递都可以通过data中的定义数据来传值。

2.使用

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

<view>{{ message }}</view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要双引号在之内)

<view id="item-{{id}}"></view>

js文件：
Page({
  data: {
    id: 0
  }
})

三元运算

<view hidden="{{flag ? true : false}}">Hidden</view>

算数运算

<view>{{a + b}} + {{c}} + d</view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

逻辑判断

<view wx:if="{{length > 5}}"></view>

字符串运算

<view>{{"hello" + name}}</view>
Page({
 data: {
   name: 'MINA'
 }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
 data: {
   object: {
     key: 'Hello '
   },
   array: ['MINA']
 }
})

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>

Page({
 data: {
   zero: 0
 }
})
最终组合成数组[0, 1, 2, 3, 4]。

条件渲染 wx:if

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}">True</view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

列表渲染 wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wxss

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

1.尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

2.样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

常见组件的使用

视图容器： view 类似div

scroll-view 滚动视图：可滚动视图区域。使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

swiper 轮播：滑块视图容器。其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

事件处理

在组件中绑定一个事件处理函数。bindtap

路由跳转

Navigator：默认跳转过去在导航栏中会出现一个返回按钮，如果不用返回，可以添加属性redirect

1）、wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

2）、wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

3）、wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面

4）、wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

5）、wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

数据缓存

异步操作

wx.setStorage(object)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

wx.getStorageInfo(OBJECT)

异步获取当前storage的相关信息

wx.removeStorage(OBJECT)

从本地缓存中异步移除指定 key 。

wx.clearStorage()

清理本地数据缓存。