微信小程序实战系列教材：1.微信小程序实战开发（一）：微信小程序简介2.微信小程序实战开发（二）：小程序基本目录结构讲解3.微信小程序实战开发（三）：小程序视图容器（view container）

今天我们详细给大家介绍的是微信小程序组件的基本使用方法。首先，创建一个新的page页面，对微信小程序基本目录结构还不清楚的，可以去我们系列教程里查看。1）新建目录（命名为newvip）；2）再项目下添加newvip.js和newvip.wxml.（在之前的教程里我们有介绍过：.js和.wxml是创建页面必不可少的两个文件）。3）到app.json里面注册我们新增加的页面，如下：

  "pages":[

    "pages/newvip/newvip",

    "pages/index/index",

    "pages/logs/logs"

  ],

复制代码4）如果这个时候编译，肯定是不成功的。(大家不妨试试，印象会更深刻)。我们还需要到newvip.js页面编写基础page内容，当然我们只需要输入page就会自动弹出，我们就先用默认的page内容就可以了。

Page({

  data:{

    String1

  },

  onLoad:function(options){

    // 生命周期函数--监听页面加载

    String2

  },

  onReady:function(){

    // 生命周期函数--监听页面初次渲染完成

    String3

  },

  onShow:function(){

    // 生命周期函数--监听页面显示

    String4

  },

  onHide:function(){

    // 生命周期函数--监听页面隐藏

    String5

  },

  onUnload:function(){

    // 生命周期函数--监听页面卸载

    String6

  },

  onPullDownRefresh: function() {

    // 页面相关事件处理函数--监听用户下拉动作

    String7

  },

  onReachBottom: function() {

    // 页面上拉触底事件的处理函数

    String8

  },

  onShareAppMessage: function() {

    // 用户点击右上角分享

    return {

      title: 'title', // 分享标题

      desc: 'desc', // 分享描述

      path: 'path' // 分享路径

    }

  }

})

5）此时编辑就会通过。我们在newvip.wxml页面简单输入一些文字查看一下，如下图所示：

其次，我们可以到微信官方网站对微信小程序组件有最基础的了解：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

我们可以看到微信有很多组件，在上一篇文章微信小程序实战开发（三）：小程序视图容器（view container）中我们也有简单介绍过小程序的组件。实际上在微信小程序组件的官方文档里已经给出了所有组件使用的代码，我们简单复制修改就可以使用，下面我们以按钮

button为例。我们从小程序官方文档中复制如下内容：

default

primary

复制代码

当然其中有一些我们暂时还不方便使用，我们就删除保留最基础的内容，编译后如下图所示：

我们以Text文本组件

为例。我们从小程序官方文档中复制如下内容：

{{text}}

复制代码

我们编译后的演示效果如下图所示：

爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。

【转载说明】  若上述素材出现侵权，请及时联系我们删除及进行处理：[email protected]