微信小程序之二（创建文件目录）

2024-05-12 21:45:32

参考：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

<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>

7. 访问

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

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

哇哈哈，看到了没，你的页面做好了！！！（注意所有页面编辑后请按 ctrl + s 保存键）

不要走开，下节更精彩！

微信小程序之二（创建文件目录）相关推荐

一、微信小程序-快速回顾(创建项目、项目结构分析)
文章目录一. 创建微信小程序项目 1.1. 准备工作 1.2. 创建微信小程序项目二.项目结构分析 2.1. 其他文件 2.2. 全局文件 2.3. 页面文件前言:软件开发需要学习的东西真的是太 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名无需服务器.无需域名.云开发直接上 ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...

最新文章

热门文章