Hello 微信小程序

微信小程序简介

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。 ----摘抄自百度百科
（特别说明，下文中所有的小程序均为微信小程序的简称。）

开始

要想进行小程序对开发，首先需要到腾讯微信公众平台上进行注册，并到小程序开发工具官网上下载相应的开发工具。此外，开发工具界面的相关说明也可在小程序开发工具官网上找到。

代码

文件类型

小程序开发工具目前提供了五种文件的编辑，分别为：wxml（类似于html），wxss（类似于css），js，json，wxs（类似于js）。

代码构成

• app.js。该文件用来调用App方法注册小程序实例，绑定生命周期函数，错误监听和页面不存在监听函数等。该文件具有唯一性，并被所有页面共享。可将该文件视为小程序的入口
• app.json。该文件为当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab等。
• app.wxss。该文件为小程序的全局样式，作用于每个页面。但是该文件中的样式会被页面的局部样式所覆盖。
• project.config.json。该文件为工具配置文件，可以在此文件中进行个人的个性化设置，并当持有该文件时，小程序开发工具会按照该文件进行配置。
• sitemap.json。该文件用来配置小程序及其页面是否允许被微信索引。

页面构成

• .js。每个页面中，该后缀的文件为页面的逻辑。
• .wxml。每个页面中，该后缀的文件为页面的结构。
• .json。每个页面中，该后缀的文件为页面的配置。
• .wxss。每个页面中，该后缀的文件为页面的样式表。

样例程序

在小程序的开发工具中，给出了一个最简单的小程序样例。结合上述内容，我们对这个样例程序进行学习。

界面操作

该小程序十分的简单，但又比较的完整。总的来说，这个小程序的功能就是，向微信发出申请，并获得微信用户的头像和昵称。

1. 初始界面。
   2.点击获取头像昵称按钮后进行权限申请。
   
   3.点击允许后的界面。
   

代码阅读

由上述内容可知，一个小程序的开始是从app.js开始，故首先对app.js所完成对功能进行描述。

根目录

app.js

该文件主要完成了三个功能，1. 使用本地储存功能来对数据进行储存。2. 使用登陆功能来对小程序进行登陆。3. 完成对用户信息的获取。下方给出包含官方注释和个人注释的代码。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    // 读取本地(Storage)中的logs，有则返回'logs'对应的值，无则返回[]
    var logs = wx.getStorageSync('logs') || []
    // 向logs数组的头部添加Date.now数据
    logs.unshift(Date.now())
    // 将logs存入本地(Storage)中，'logs'为key，logs为值
    wx.setStorageSync('logs', logs)

    // 登录
    // 该函数可以获取微信登陆的临时凭证code，并回传到开发者服务器
    // 小程序开启后自动调用
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (res.code) {
          console.log('hello')
        } else {
          console.log('登陆失败'+res.errMsg)
        }
      }
    })
    // 获取用户信息
    // 获取用户的当前设置
    wx.getSetting({
      // 接口调用成功的回调函数
      success: res => {
        // res.authSetting可以对一下功能进行授权申请
        // 用户信息，地理位置，微信步数，录音功能，保存图像，摄像头
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          // 获取用户信息
          wx.getUserInfo({
            // 接口调用成功的回调函数
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              // this.globalData为app.js的全局变量
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              // this.userInfoReadyCallback为app.js的全局变量
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json

该文件主要对小程序的页面，窗口等进行了配置，下方给出添加上注释的代码。

{
  // 该小程序所包含的所有页面
  // index表示打开小程序时首先呈现的页面
  // pages的内容为小程序页面的路由信息
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    // 下拉 loading 的样式，仅支持dark/light
    "backgroundTextStyle":"light",
    // 导航栏背景颜色
    "navigationBarBackgroundColor": "#fff",
    // 导航栏标题文字内容
    "navigationBarTitleText": "Weixin",
    // 导航栏标题颜色，仅支持black/white
    "navigationBarTextStyle":"black"
  },
  // 启用新版的组件样式
  "style": "v2",
  // 单页模式相关配置
  "sitemapLocation": "sitemap.json"
}

app.wxss

该文件为小程序的全局样式，下方给出添加上注释的代码。

/**app.wxss**/
// 定义全局container控制器的样式
.container {
  // 设置高度比例
  height: 100%;
  // 使用flex布局方式
  display: flex;
  // 将内容垂直显示，即每列一致
  flex-direction: column;
  // 使元素位于容器中间
  align-items: center;
  // 容器中的元素之间留有空白
  justify-content: space-between;
  // rpx是可以根据屏幕宽度进行自适应的单位
  padding: 200rpx 0;
  // 设定元素的边框
  box-sizing: border-box;
} 

index页面

index页面具有四个文件，由上述内容可知，.js文件为逻辑文件，.json为配置文件，.wxml为页面结构文件，.wxss为页面样式文件。

index.wxml

页面的结构文件，代码如下。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    // 判断!hasUserInfo && canIUse是否为true
    // open-type:微信开放能力.
    // 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
    // bindgetuserinfo:用户点击该按钮时，会返回获取到的用户信息
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      // 否则直接加载用户的头像信息和用户名称
      // bindViewTap为点击头像时的时间处理函数
      <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>

index.js

该文件主要处理index页面的相关逻辑，代码如下。

//index.js
//获取应用实例
const app = getApp()

Page({
  // data中的变量为整个page都可以使用的变量
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    // canIUse: 判断小程序的API，回调，参数，组件等是否在当前版本可用
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //点击头像后的事件处理函数
  bindViewTap: function() {
    // 使用导航模式跳转到logs页面
    // 这里的url路径是相对路径
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  // 生命周期函数
  onLoad: function () {
    // 从app中加载globalData变量的数据
    if (app.globalData.userInfo) {
      // 双向绑定，用来更新数据
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 如果未申请到权限，则点击按钮申请
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  // 获取个人信息的回调
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

小结

这是第一篇关于学习微信小程序的小记录，因为我也在积极的学习中，若有错误，希望大佬们指出。之后会陆续更新我的学习历程，谢谢阅读。