学习微信小程序开发第一个示例

在我们学完HTML、CSS、Javascript的相关基础知识后，接着又学习HTML5的开发，虽然有部分类似，但还是增加了一些新的标签、属性、API等知识点需要我们去学习。目前我们的生活已经被微信占据，当然也离不开微信里面的各种小程序应用，如：购物，交通出行，医疗，生活缴费，大数据行程码等等。作为技术的我们要不断学习充实自己，提升自己，必然也要学习微信小程序的开发，这样才能不被社会淘汰，才能有立足之地。

注册账号

打开链接：https://mp.weixin.qq.com/wxopen/waregister?action=step1

如果没有账号，填入相关信息，点击“注册”；如果有账号，直接登录即可。

有了账号登录以后我们就可以对微信的小程序进行管理，维护和开发，这篇文章主要来学习小程序的开发。

开发工具

账号准备好以后，微信小程序的开发要先安装微信开发者工具，根据自己的系统选择对应版本进行安装。

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完成以后，打开 微信开发者工具，如下图：

登录小程序后台管理，如下图在“开发管理”里面找到 AppID(小程序ID)，填入上图红色框中，点击确定就可以创建一个默认模板的小程序了。

创建好的小程序包含一个 index 和 logs 页面，还有其它一些启动，配置，公共样式等文件，如下图：

目录结构

页面文件夹（pages），创建一个页面（如：login）主要包含四个文件（login.js，login.json，login.wxml，login.wxss）

xx.js：用来编写页面处理逻辑，方法，事件等脚本。

xx.json：用来配置当前页面的一些属性（标题，颜色等）。

xx.wxml：用来编写页面结构，使用小程序组件。

xx.wxss：用来编写页面样式。

根路径包含的文件（app.js，app.json，app.wxss）

app.js：编写小程序启动时的一些处理逻辑。

app.json：编写小程序的公共配置属性（页面，顶部导航，颜色等）。

app.wxss：编写小程序的公共样式内容。

小程序的全局配置和页面配置就不在这里一一介绍了，具体内容需要去学习官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

小程序组件

开发小程序我们要严格使用小程序自己的组件，HTML的部分标签在这里是不能使用。

视图容器：view（视图容器，比较常用类似 div），swiper（滑块，可以用来实现轮播图、水平垂直滑动），scroll-view（可滚动视图区域，可以用来水平或垂直的滚动区域）等。

表单组件：button（按钮），checkbox（复选框），editor（富文本编辑器），form（表单），input（输入框），label（标签），radio（单选框），slider（滑块选择器），switch（开关选择器），textarea（多文本）等。

基础组件：text（文本框），icon（图标），progress（进度条），rich-text（富文本）。

导航：navigator（页面链接，类似 <a> 标签）。

媒体：audio（音频），video（视频），image（图片），camera（系统相机，实现扫二维码功能）等。

画布：canvas（画图，用来实现绘图和动画）。

地图：map（地图）。

常用组件示例图如下：

常用组件示例代码如下：

<!--pages/demo/demo.wxml-->
<view>
  <view class="view-title">视图容器</view>
  <text>swiper</text>
  <swiper indicator-dots autoplay>
    <swiper-item><image src="/static/images/1.jpg" alt="" ></image></swiper-item>
    <swiper-item><image src="/static/images/2.jpg" alt="" ></image></swiper-item>
    <swiper-item><image src="/static/images/3.jpg" alt="" ></image></swiper-item>
  </swiper>
  <text>scroll-view</text>
  <scroll-view class="scroll-view-box" scroll-y>
    <view>scroll-1</view>
    <view>scroll-2</view>
    <view>scroll-3</view>
    <view>scroll-4</view>
    <view>scroll-5</view>
  </scroll-view>
</view>
<view class="view-form">
  <view class="view-title">表单组件</view>
  <view class="form-item">
    <button type="primary">按钮</button>
  </view>
  <view class="form-item">
    <checkbox value="1" checked="true">足球</checkbox>
    <checkbox value="2">篮球</checkbox>
    <checkbox value="3" disabled="true">羽毛球</checkbox>
  </view>
  <view class="form-item">
    <label for="txtName">用户名</label>
    <input id="txtName" type="text" auto-focus placeholder="请输入用户名" />
  </view>
  <view class="form-item">
    <radio value="1">男</radio>
    <radio value="2">女</radio>   
  </view>
  <view class="form-item">
    <label for="">开关</label>
    <switch checked="true"></switch>
  </view>
  <view class="form-item">
    <slider step="10" min="0" max="100" value="50" show-value="true"></slider>
  </view>
</view>
<view>
  <view class="view-title">基础组件</view>
  <view>
    <icon type="info" size="64"></icon>
  </view>
  <view>
    <progress percent="50" show-info></progress>
  </view>
  <view>
    <rich-text></rich-text>
  </view>
</view>
<view>
  <view class="view-title">导航</view>
  <view>
    <navigator url="www.baidu.com">百度链接</navigator>
  </view>
</view>
<view>
  <view class="view-title">媒体</view>
  <view>
    <audio controls src="/static/audio/Monody.mp3"></audio>
  </view>
  <view>
    <video src=""></video>
  </view>
</view>
<view>
  <view class="view-title">地图</view>
  <map name="mapBox"></map>
</view>

 小程序的组件，组件的属性，方法的使用可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

框架API

小程序提供的API有：基础，路由，跳转，转发，界面，网络，支付，画布，媒体，位置，文件，数据缓存，数据分析，开发接口等。

授权登录：wx.login(Object object)

获取用户信息：wx.getUserInfo(Object object)

跳转页面：wx.redirectTo(Object object)，wx.navigateTo(Object object)

消息提示框：wx.showToast(Object object)

发起请求：wx.request(Object object)

数据缓存：wx.setStorage(Object object)，wx.getStorage(Object object)  需注意正确的用法

小程序提供的API用法可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/

登录页面示例

pages/login/login.wxml

<!--pages/login/login.wxml-->
<view class="login-box">
  <view class="login-row">
    <label for="">用户名</label>
    <input type="text" name="txtName" id="txtName" bindinput="bindKeyInput" placeholder="请输入用户名" />
  </view>
  <view class="login-row">
    <label for="">密码</label>
    <input type="password" name="txtPwd" id="txtPwd" bindinput="bindKeyInput" placeholder="请输入密码" />
  </view>
  <view class="login-row">
    <button class="login" type="primary" bindtap="commitLogin">登录</button>
  </view>
</view>

pages/login/login.js

// pages/login/login.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    txtName: "",
    txtPwd: "",
    userInfo: []
  },
  bindKeyInput: function (e) {
    //根据文本框id值绑定输入值
    this.setData({
      [e.target.id]: e.detail.value
    });
  },
  commitLogin: function() {
    // 登录请求接口
    this.initData();
  },
  initData: function(){
    // 模拟返回值
    this.data.userInfo = {
      userName: this.data.txtName,
      userPwd: this.data.txtPwd
    }
    // 本地缓存数据
    wx.setStorage({
      key: "userInfo",
      data: this.data.userInfo
    });
  },
  login: function() {
    // 登录请求后台接口
    wx.request({
      url: 'http://localhost:3000/api/user/login', //请求的接口地址
      data: {
        userName: this.data.txtName,
        userPwd: this.data.txtName
      },
      method: "POST",
      success (res) {
        // 获取返回值 res.data
        // 模拟返回值
        this.data.userInfo = {
          userName: this.data.txtName,
          userPwd: this.data.txtName
        }
        // 本地缓存数据
        wx.setStorage("userInfo",this.data.userInfo);
      }
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取缓存中的值
    let _this = this;
    wx.getStorage({
      key: "userInfo",
      success (res) {
        _this.data.userInfo = res.data;
        console.log(_this.data.userInfo)
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

注意事项

在使用本地数据缓存的时候，要注意 wx.setStorage(Object object)，wx.getStorage(Object object)，wx.setStorageSync(string key,any data)，wx.getStorageSync(string key) 的正确用法。

在请求本地接口的时候，小程序是不允许使用本地请求，必须使用指定的域名进行网络通信，具体说明参考：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html#1.%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9F%9F%E5%90%8D%E9%85%8D%E7%BD%AE

在请求本地接口的时候可以使用工具 uTools，在工具里面搜索内网穿透并安装此插件，具体用法查看官网帮助文档：http://u.tools/docs/guide/about-uTools.html