微信小程序初使心得【微信小程序快速入门】-阿里云开发者社区

摘要: 2016年推出微信小程序，时至今日，历经几个版本的更新，已形成了相对实用和稳定的服务平台。本文简单的介绍了微信小程序的入门用法，今后会继续关注和实践。

微信小程序

2016年推出微信小程序，时至今日，历经几个版本的更新，已形成了相对实用和稳定的服务平台。本文简单的介绍了微信小程序的入门用法，今后会继续关注和实践。

2017年，春节刚过，想来，已经过了三四个工作日。接下来，期待的莫过于，十五的元宵。

近日，在工作闲暇之余，阅读了一些关于微信小程序的文章，忍不住，想动手试他一试。本文就以“我的第一个微信小程序”为例，简单的介绍下，微信小程序的入门级用法。

开发微信小程序前期，我们需要做以下几项准备工作：

1.、注册和认证一个微信小程序账号，注册后，腾讯审核很及时，我的是当天过的。

2、“工欲善其事，必先利其器。”，接着，我们需要下载一个微信开发者工具。相关下载链接信息：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

做好前期的准备工作后，接下来需要做的是，就启动微信开发者工具，通过前期准备的小程序账号，获取小程序的APPId，然后，创建一个小程序项目。如果不清楚怎样获取APPID，请访问简易教程。

在这里，我新建一个名为demo的小程序项目。我的目录结构是这样的：

微信小程序

点击开发者工具左侧导航的“编辑”，最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件。APP函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。app函数必须声明在app.js中，而且一个小程序只允许出现一次App函数。关于微信小程序的更多概念性的东西，这里不做详细说明，我们这里只谈他的具体用法。

先来看下一个简单的效果图吧：

小程序首页

一、微信小程序（组件+框架）的应用

这是我的小程序的一个首页（index）。下面我们先简单的看下视图标记：

<!--index.wxml-->
<!--自定义列表组-->
<view class="container">
<view class="list-group" style="flex-direction:column;">
    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>
   <view class="list-group-item" bindtap="bindViewTap">
       <image src="http://mobile.kaola100.com/images/more.png" background-size="cover"></image>
       <text>更多考试</text>
    </view>
  </view>
<view class="navigator">
<navigator url="../index/index">首页</navigator>
<navigator url="../account/account" class="btn-danger" style="border-left:none;border-right:none;">登录</navigator>
<navigator url="../sample/sample">帮助</navigator>
</view>
</view>

里面用了几个嵌套的view容器，在微信小程序中，我认为view标记就类似于HTML标签中的div。看着很简单吧。最下面，我用了导航标签（navigator ）。在index.wxss文件中，进行样式的定义。

接下来，在index.js进行Page对象的注册。代码如下：

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    classify:[{id:2,name:"建筑工程",imageUrl:"http://static.kaola100.com/upload/admin/2015-07-20/20150720170910697.png"},
              {id:3,name:"医药卫生",imageUrl:"http://static.kaola100.com/upload/admin/2015-07-14/20150714113357871.png"},
              {id:4,name:"职业资格",imageUrl:"http://static.kaola100.com/upload/admin/20150521184649758.png"},
              {id:6,name:"外语",imageUrl:"http://static.kaola100.com/upload/admin/20150521184732112.png"},
              {id:1,name:"学历教育",imageUrl:"http://static.kaola100.com/upload/admin/20150521183838915.png"}]
  },
  //事件处理函数
  bindViewTap: function(r) {
    wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    var data={};
    app.getUserInfo(function(userInfo){
      //更新数据
      data={userInfo:userInfo};
      that.setData(data);
    });
  },
      onShareAppMessage: function () {
    return {
      title: '自定义分享标题',
      desc: '自定义分享描述',
      path: '/index/index'
    }
  }
})

其中,getApp()是全局函数，用于获取当前应用程序实例。通过app实例，可以获取项目下，app.js中定义的成员。index.js中的Page函数进行页面注册。其中，data属性，主要用于视图页面的数据绑定，从上面代码中可以看到，我在data对象中，定了classify的数组成员，这些语法，和js语法基本一致。在这里定义好数据之后，我们就可以看到，上面的效果。这里说下，绑定列表：

    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>

wx:for="{{这里直接写data属性中定义的成员}}"，它的绑定语法是用两个大括号包裹。{{item.iamgeUlr}}这是绑定数组中的一项，变量item是默认，要想获取索引默认变量名index，这两个变量都是可以自己定义的。更加详细的介绍：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html

这样，就把我们在index.js文件中Page方法注册的对象，轻松拿到。个人觉得，Page方法就类似于MVC中的Controller,data属性，就类似于MVC中的视图模型(ViewModel)。于是得到以下关系：

微信小程序	MVC模式
wxml文件	视图
Page	Controller
data属性	视图模型（ViewModel）

不妨，我们在看一看，下面的例子：

这里我简单的做了一个登录页面：

微信小程序

这是一个简单表单的应用，视图代码如下：

<!--pages/acccount/account.wxml-->
<view class="form-group">
<form>
<view><input type="text" auto-focus placeholder="请输入登录名" /></view>
<view><input type="text" auto-focus placeholder="请输入登录密码" /></view>
<button bindtap="login" class="btn-login">立即登录</button>
</form>
</view>
<view class="navigator">
<navigator url="../index/index">首页</navigator>
<navigator url="../account/account" class="btn-danger" style="border-left:none;border-right:none;">注册</navigator>
<navigator url="../logs/logs">帮助</navigator>
</view>

当我点击登录时，做了一次跳转：

微信小程序

这是通过调用微信小程序的API，来呈现当前用户信息。

//user.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({userInfo:userInfo})
    })
  }
})

这也是，微信官方自带演示小程序的写法，它调用了app对象的getUserInfo方法，来获取当前用户信息。

getUserInfo中在app.js中事先定义：

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

二、微信小程序（API的应用）

经过以上的代码示例，想必对微信小程序的框架结构有一个初步的认识。接下来，我们进行下一个进阶：

获取远程服务器数据。

在此之前，我们必须先在微信小程序的平台上，设置下域名：

微信小程序HTTPS

注意：微信小程序，不支持普通的HTTP协议，必须通过HTTPS协议。

于是，我在本地搭建了一个api服务，采用HTTPS协议，通过修改HOST文件，来映射本机访问。这里我以

https://api.xxxx.com为例：

微信小程序是通过全局函数wx.request函数来完成，语法入下：

  wx.request({
    url: 'https://URL',
    data: {},
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    // header: {}, // 设置请求的 header
    success: function(res){
      // success
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
  })

情景是这样的，通过点击首页的图标，来跳转至另一个页面，跳转的过程，需携带参数。

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    //console.log(options);
    var that=this;
    wx.request({
      url: 'https://api.xxxxxxx.com/api/classify/GetChildrenClsssify?id='+options.id,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res){
        // success
         that.setData({courses:res.data.datas});
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

我在Page的onLoad事件中，向远程地址https://api.xxxxxxx.com/api/classify/GetChildrenClsssify发起GET请求，其中，携带参数名为id的参数。

在此过程中，总是触发fail事件，接口响应200，这个错误，是由于本地域名映射，导致微信开发者工具，验证域名不通过造成的，我们只需要通过以下设置：

微信小程序设置

红色标注处，选中即可。至此，我们的请求便可顺利完成，远程请求返回成功后，我们通过访问当前页的

setData()方法来，设置当前页面的data属性。在这里，有些朋友可以注意到了，在we.request函数前，声明了一个var that=this；的语句，用变量that来接收this对象，这样是为了wx.request请求成功后，在success回到函数中，调用that.setData(object);方法，来赋值数据。wx.request中，success回调函数中的一个参数res，res.data就是获取到的数据。这样一来，页面加载时，向远程服务器发起请求，响应成功后，给data赋值，然后，就可以在视图绑定数据后，进行渲染了。

在这个过程中，你可能想知道，怎样传参？

微信小程序的传参，有点儿像HTTP请求中的传参方式，?参数名=参数值。我们还是回到首页，看一下代码：

    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>

我在view标记中，自定义了一个名为data-id的属性，这是自定义属性，有点儿类似于html5中的data-xxx。这样定义后，再看我们在index.js中是如何取值的：

  //事件处理函数
  bindViewTap: function(r) { wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id}) }
bindViewTap是我自定义的函数名，用来绑定视图view的点击事件：（bindtap）。奥妙就在于bindViewTap的参数r,通过调试控制台输出，我们可以清晰的看到r的结构：

微信小程序

这是控制台输出的参数r的结构，这样我就可以通过参数r来获取到在index.wxml中给view标签定义的属性（data-id）；于是就有了这样一句代码：

 wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})

wx.navigateTo是微信小程序提供的跳转方法。于是，我们从首页点击，就看到了入下效果：

微信小程序

这是远程请求的数据。

再有就是以下接口的应用了，相对简单的多：

微信小程序API

数据缓存	查看详细
位置	查看详细
文件	查看详细
媒体	查看详细
网络	查看详细
界面	查看详细
开放接口	查看详细
设备	查看详细

三、微信小程序（其它）

以.wxss扩展的文件，为微信小程序的样式定义，它支持大部分css属性，那我们就可以像定义css一样，定义微信小程序的样式。app.wxss文件是站在全局来定义微信小程序样式，那我们既可以把公用的一些样式，定义在这里。每个页面也都有自己的wxss文件。app.wxss和页面的wxss文件之间，自然是继承和重写的关系了哈。

目前，微信小程序的大小，不能超过1MB，官方的说法是为了保证微信小程序的体验。不过，这也没什么，我们做微信小程序的时候，尽量把资源文件，放在服务器上，比如：图片、文档、视频、背景音乐等。小程序项目中，我们只保留程序必要的代码文件即可。

简单的整理了下微信小程序的这些常见问题：

不能直接操作 Page.data

避免在直接对 Page.data 进行赋值修改，请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染

怎么获取用户输入

<input id="myInput" bindchange="bindChange" />
<checkbox id="myCheckbox" bindchange="bindChange" />

var inputContent = {}
Page({
  data: {
    inputContent: {}
  },
  bindChange: function(e) {
    inputContent[e.currentTarget.id] = e.detail.value
  }
})

为什么脚本内不能使用`window`等对象

页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用<image/>标签

目前好像不支持HTML内容。<text>标签会把Html标签显示出来，不会进行渲染，目前还没发现有类似于webview这样的东东。

关于微信小程序的研究，今天就到这里，最后预祝大家元宵节快乐！

微信小程序初使心得【微信小程序快速入门】

不能直接操作 Page.data

怎么获取用户输入

为什么脚本内不能使用`window`等对象

本地资源无法通过 css 获取

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序初使心得【微信小程序快速入门】

不能直接操作 Page.data

怎么获取用户输入

为什么脚本内不能使用window等对象

本地资源无法通过 css 获取

热门文章

最新文章

相关课程

相关电子书

相关实验场景

为什么脚本内不能使用`window`等对象