微信小程序教程系列之新建页面(4)


Posted in Javascript onApril 17, 2017

例如在web的开发中,新建一个页面只需要新建一个html文件即可。

但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习

新建一个页面的步骤:

1> 必须要创建一个wxml文件和一个js文件,并且文件名要同名(例:test.wxml 和 test.js)。
2> js文件内,需要写上注册页面的Page()函数!
3> 并且要到app.json文件中,注册新建页面的路径信息。

示例:

新建了一个test.js文件和一个test.wxml文件,
以及在app.json文件内的”pages”数组内,放在第一个的页面,就是程序启动时,第一个所打开的页面。

微信小程序教程系列之新建页面(4)

在test.js文件中,必须要有一个Page()函数

微信小程序教程系列之新建页面(4)

在wxml文件内,随便写一点内容(否则打开空白页,你都不知道是否成功运行项目)

微信小程序教程系列之新建页面(4)

F5运行项目:

微信小程序教程系列之新建页面(4)

成功新建了一个页面

备注:

记得要新建js文件,并且要注册Page()函数,否则就会报如下错误

微信小程序教程系列之新建页面(4)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
jquery实现动态画圆
Dec 04 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
JS简单验证上传文件类型的方法
Apr 17 #Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
React 组件间的通信示例
2018/06/14 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Python表示矩阵的方法分析
2017/05/26 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
python压包的概念及实例详解
2021/02/17 Python
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
合作经营协议书范本
2014/04/17 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
节约用水广告语60条
2019/11/14 职场文书
导游词之江南周庄
2019/12/06 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
MySql新手入门的基本操作汇总
2021/05/13 MySQL
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android