微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

1.4 实战1：Hello World

本节通过一个简单的测试小程序，实现一个输出Hello World消息的页面。

1.4.1 编写页面链接

打开前面创建的测试项目，在此项目的基础上，我们准备创建一个helloWorld页面。

在模拟器的下方，可以看到当前的页面地址和页面所携带的参数。该页面的路径为pages/index/index，那么文件就应当是pages→index中的index文件。在代码的编辑器中可以看出，似乎在这个名称为index的文件夹中包含了3个命名为index但后缀不同的文件，如图1-18所示。其中：

图1-18 开发小程序的文件结构

● 后缀为.wxml的文件是该页面的页面文件。

● 后缀为.wxss的文件是该页面的样式文件。

● 后缀为.js的文件是该页面的逻辑文件，也就是编写JavaScript代码的文件。

打开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}}"
background-size="cover"＞＜/image＞
      ＜text class="userinfo-nickname"＞{{userInfo.nickName}}＜/text＞
    ＜/block＞
  ＜/view＞
  ＜view class="usermotto"＞
    ＜text class="user-motto"＞{{motto}}＜/text＞
  ＜/view＞
＜/view＞

本文件的第1行，即在编辑器中显示为绿色的部分，是注释。也就是说，这类代码在程序中只是为了增加程序的可读性，并不会在程序中有任何作用。

第2行是小程序中最基本的一个元素：＜view＞＜/view＞。这个元素相当于HTML中的＜div＞＜/div＞元素，其指定的class属性的值container，是在index.wxss中命名的样式效果，可以打开index.wxss查看。

在这里，我们需要编写一个跳转的链接，跳转到之后要编写的helloWorld页面中。新增一个＜view＞＜/view＞元素，代码如下：

＜view bindtap='bindMyViewTap'＞点我跳转＜/view＞

将上述代码加到任何地方都是可以的，只不过会出现在页面的不同区域，但不会影响效果。在上述代码中，＜view＞＜/view＞绑定了一个单击事件，而这个事件需要手动添加到index.js文件中。

注意：使用Ctrl+S键进行保存或手动单击编译按钮时都会引发保存和重新编译事件，即在左边的模拟器中可以看到小程序的最新效果。

接下来需要编写index.js文件。在bindViewTap方法的下面、onLoad方法的上面，增加如下代码。

……
  // 事件处理函数
  bindViewTap: function（）{
    wx.navigateTo（{
      url: '../logs/logs'
    }）
  }，
  // 用户单击“点我跳转”view
  bindMyViewTap:function（）{
    wx.navigateTo（{
      url: '/pages/index/helloWorld'
    }）
  }，
  onLoad: function（）{
……

这里使用了wx.navigateTo这个API进行页面跳转。使用Ctrl+S键保存，尝试单击，查看效果。此时在调试器中会报错，表示helloWorld页面不存在，如图1-19所示。那是因为这个页面还没有创建，下一节就介绍如何创建。

图1-19 调试器的报错

1.4.2 编写新页面内容

首先创建新页面。开发者工具提供了非常简单的方式，只需要在app.json中声明该页面，保存后就会自动为开发者生成这个页面的3个文件，只需要在app.js中修改pages数组的内容，如下所示。

{
  "pages":[
    "pages/index/index"，
    "pages/logs/logs"，
    "pages/index/helloWorld"
  ]，
  "window":{
    "backgroundTextStyle":"light"，
    "navigationBarBackgroundColor": "#fff"，
    "navigationBarTitleText": "WeChat"，
    "navigationBarTextStyle":"black"
  }
}

保存后开发者工具自动生成helloWorld页面。现在尝试在index页面单击链接，就会跳转至该页面，如图1-20所示。

图1-20 helloWorld页面

接下来，需要编写该页面的代码。打开helloWorld.wxml，编写一个简单的＜ text ＞＜/ text ＞元素，如下所示。

＜!--pages/index/helloWorld.wxml--＞
＜text＞{{data}}＜/text＞

上述代码指明了在文字元素中显示一个名为data的变量，而这个变量需要在helloWorld.js中声明，代码如下所示。

/＊＊
  ＊ 页面的初始数据
  ＊/
  data: {
    data: 'Hello World'
  }，

这样，一个完整的显示Hello World的页面就完成了，效果如图1-21所示。

图1-21 页面显示效果

上一章目录下一章