大云网新技术电力软件正文

微信小程序二（创建页面）

2018-03-12 15:48:21 csdn　点击量：评论 (0)

好了 hello world 创建好了，咱开始写页面了，那么如何创建一个简单的页面呢，废话不多说，开始撸代码新建一个页面需要以下几步，1

好了 hello world 创建好了，咱开始写页面了，那么如何创建一个简单的页面呢，

废话不多说，开始撸代码

新建一个页面需要以下几步，

1. 在pages 中添加一个目录

（当然如果你觉得写在现有的目录里面就好那这一步就省略啦）

点击左侧的编辑 --> 点中 pages 文件夹 --> 点击右上角的 + 号 --> 在下拉菜单中选择目录 --> 弹出框中填写目录名称（这里我们写了test）--> 点击确定

2. 新建一个wxml 文件

选中 test 文件夹 --> 点击右上角 + 号 ---> 选择 wxml 类型文件 --> 填入文件名（注意这里必须填写后缀名至少我的版本是必须填入的）

3. 编辑test.wxml 文件

为了方便测试我们随便填写点内容进去

[html] view plain copy
<view class="container">  
    <text>这是我的test页面哦哦！！！</text>  
</view>  

4. 创建test.js文件

使用同样的方法在test 目录下创建一个 test.js 文件

[javascript] view plain copy 
//test.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log('onLoad test');  
  }  
})  

5. 将test 页面加入 app.json

在pages 属性中加入一条 test 页面所在的目录这里是相对路径首部不必填写 /

6. 在首页加入访问链接

好了上面路径也加好了我们得加个入口才能看到自己写的页面啊，小程序的首页一般是默认显示 pages 属性

中的第一条路径所指向的页面，如果我们不想破坏原有的那么我们直接找到首页 pages/index/index.wxml 添加一个链接

[html] view plain copy 
<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
 </view>  