微信小程序开发入门（一）

资源共享

1. 微信小程序开始学习视频：链接：https://pan.baidu.com/s/1OL8O2nXICZPRlkibLdiuMw
   提取码：1ksc 复制这段内容后打开百度网盘手机App，操作更方便哦
2. 微信官方小程序开发指南：https://developers.weixin.qq.com/miniprogram/dev/index.html

认识微信小程序

1. 微信小程序由微信团队提供给用户的应用程序，微信向用户提供了丰富的API。
2. 微信小程序涉及前端核心知识，但并不需要完全学习前端技术。开发微信小程序需要掌握wxml、wxss(css)、JavaScript核心知识。
3. 微信小程序几乎用不到HTML，取而代之的是更加简单的wxml，JavaScript和css基本无变化。
4. 微信小程序可以和当前登录的用户信息、微信支付、使用模板消息向微信发送通知消息。

微信小程序的地位：微信小程序是只能运行在微信客户端的移动应用程序，其后台需要Java、PHP、C++及数据库语言的后端支持，类似于PC端的Web应用。

微信开发者工具

开发微信必须使用的工具由微信官方提供：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19042414
安装成功开发页面，首次开发，需要微信扫描登录。

登录成功页面：

点击大加号，因为不是正式开发小程序，所以还没有申请APPID，所以点击测试号、选择路径、输入项目名称、新建。

小程序默认开发项目新建成功，控制台如下：

在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。

页面和目录

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

名称	作用	必需
app.json	小程序公共配置	是
app.js	小程序逻辑	是
app.wxss	小程序公共样式表，类似于css起装饰作用	否

一个小程序页面由四个文件组成，分别是：

后缀	作用	必需
.js	JS 脚本逻辑文件	是
.wxml	WXML 模板文件	是
.json	JSON 配置文件	否
.wxss	WXSS 样式文件	否

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

JSON 语法

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式：

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

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

app.json

是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

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

其它json配置

1. 工具配置project.config.json，详细配置方法，可进行个性化配置：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

2. 页面配置 log.json：app.json 是全局页面配置文件，log.json属于页面配置文件，它只对log文件起作用，使log文件页面配置不同于app.json的配置。实际上每个页面都可以进行只适用于自己的局部页面配置。

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}

3. 小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

WXML 模板

WXML代替的就是HTML，我们看看pages/index/index.wxml。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" 
    bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" 
      src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

与HTML不同的是

1. 小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
   WXML 是这么写 :

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

JS 只需要管理状态即可:

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

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS 样式

app.wxss整个小程序的公共样式，此处定义的样式所有页面都可以用。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

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

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

js逻辑交互

app.js小程序逻辑

App()函数用来注册一个小程序，接受object（对象）类型的参数，其中onLauch()会在打开应用时执行，初始化小程序。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

onShow函数和onHide函数是用来标记小程序当前处于前台还是后台，函数中可以进行日志信息输出，方便调试。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow: function () {
    console.log("从后台进入前台");
  },
  onHide: function () {
    console.log("从前台进入后台");
  }
})

这个文件内容都在App({})的{}中，每个函数通过，分割开，函数实现部分在{}中。

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

logs.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

以上是微信小程序前端开发的基本流程，而实际上要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器并将后台服务器设置成https服务。