微信小程序> 微信小程序之二(创建文件目录)

微信小程序之二(创建文件目录)

浏览量:1766 时间: 来源:han_cui

参考:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=2017112

如何创建一个简单的页面呢,


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


1. 在pages 中添加一个目录

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

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

小程序

2. 新建一个wxml 文件

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

小程序

3. 编辑test.wxml 文件

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

[html] view plain copy 
  1. view class="container"  
  2.     text这是我的test页面哦哦!!!/text  
  3. /view  

4. 创建test.js文件

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

[javascript] view plain copy 
  1. //test.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.     userInfo: {}  
  7.   },  
  8.   onLoad: function () {  
  9.     console.log('onLoad test');  
  10.   }  
  11. })  


5. 将test 页面加入 app.json

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

小程序

6. 在首页加入访问链接

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

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

[html] view plain copy 
  1. view class="btn-area"  
  2.    navigator url="/pages/test/test" hover-class="navigator-hover"跳转test页面/navigator  
  3.  /view  

7. 访问

一且准备就绪 ,点击左下角的 “编译”,出现如下 页面 

小程序


然后 点击 “”跳转test页面“”

小程序


哇哈哈,看到了没,你的页面做好了!!!(注意所有页面编辑后 请按 ctrl + s 保存键)

不要走开,下节更精彩!


版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎