学习微信小程序（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/r1037/article/details/78248911

由于公司业务需要，我开始接触微信小程序，这个产品目前已经很成熟，有相应的API和开发工具，本博客将带你和我一起进入微信小程序的世界。
阅读本教程前，您需要了解的知识：熟悉前端页面编写

一、小程序概述

小程序的特性：无须安装、触手可及、用完即走、无须卸载
点击查看官方说明文档

1、产品定位及功能介绍

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，体验比网站好，比下载APP更便捷。

2、体验小程序

下载微信客户端版本号：6.3.27 及以上下载源码版本20170111
微信小程序体验

3、小程序的优缺点

通过体验之后我们可以很快的了解到小程序的魅力所在。
我的理解就是：简洁易用，小而美。

     微信小程序是一种介于原生app、和web app的结合体。通过微信进行加载，实现类似原生app的流畅。相对原生app来说，小程序更加轻量、更新实时、跨平台；相对web app来说，小程序资源离线，体验更流畅。微信小程序的设计目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

   对于使用用户来说，小程序安装包<=1MB，下载安装极其快速，以现在的网速来讲，基本上可以忽略了，感观上不会很明显，同时大大解放了手机内存。界面风格统一，反应速度快，保证了良好的用户体验，沿用了微信的设计理念。小程序定位在高频使用场景。体验比网站好，比下载APP更便捷。

   对于开发应用者来说，一次开发，多个平台都能用。不同于像开发手机APP一样，开发Adriond版本又要开发IOS版本，完全一样功能的APP要开发两套系统，开发成本与维护成本颇大。而小程序是依附在微信上运行的，只要安装了微信就可以使用小程序开发出来的应用（直接在微信里面打开使用）。微信小程序提供了详细的 UI、运营等规范，统一用小程序语言进行开发。开发周期短而快，开发成本相对低些，特别是微信已解决了兼容性的问题，而这些对创业公司的MVP产品尤为重要（将产品快速开发推出到市场进行试验。从做生意的角度来考虑，用户在哪里、用户更多时间花在哪里，就应该在哪里构建入口）。

总的优势来讲：低门槛下载，跨平台，开发成本低，体验更流畅，可以使用微信的支付功能

而局限在于：

开发基于微信框架，部分功能受限，不支持现有的其他第三方插件；

小程序页面只能同时打开5个，如果交互流程较长难以支持；

小程序包大小限制为1M（目前），所有只适合轻量级。

二、编写小程序前的准备工作

1、小程序注册

注册小程序帐号
在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。
详情请进入微信小程序帮助文档：

https://mp.weixin.qq.com/debug/wxadoc/introduction/#注册小程序帐号

2、下载微信小程序开发工具（IDE）

1）使用官方开发工具

下载地址（1.01.171013）：

win64下载地址： https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki
win32下载地址：https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki
mac下载地址：https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki

2）使用Egret Wing第三方开发工具（个人推荐）

下载地址（v 4.0.3）：

https://www.egret.com/api/download/index?app=EgretWing&v=4.0.3&f=product

3、了解小程序基本架构和实现机制

1）框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

响应的数据绑定
框架的核心是一个响应的数据绑定系统。

整个系统分为两块视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通过这个简单的例子来看：

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'WeChat'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

2）关联知识语法

基础:HTML+JS+CSS

进阶：React、Vue

语法：Mustache、XML

规范：CommonJS

3）架构

一个小程序页面包含4个文件：

1.WXML：页面结构用于创建页面对象，以及处理页面生命周期控制和数据处理

2.JS：页面逻辑设置当前页面工作时的window的配置

3.WXSS：页面样式用于定义页面中元素结构，遵循XML语法，不是HTML语法，增加了flex布局

4.JSON：页面配置用于定义页面样式的，语法遵循CSS语法，扩展了CSS基本用法和长度单位

描述页面的四个文件必须具有相同的路径与文件名。

三、开始测试小程序API组件

1、创建demo项目

开发基本框架（MINA框架）点击查看高清大图

这里写图片描述

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
点击查看-app()官方说明文档

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
点击查看-page()官方说明文档

页面路由：在小程序中所有页面的路由全部由框架进行管理。
点击查看-路由官方说明文档

2、视图层（WXML）数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

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

内容

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

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

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

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

Page({
  data: {
    id: 0
  }
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked=”false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

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

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。

逻辑判断

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

更多请点击查看官方文档