(1)在pages目录下新建子目录(名字可以自己定,本文以newpage为例)
建好子目录后,依次新建文件newpage.js,newpage.json,newpage.wxml,newpage.wxss.如图
注意:newpage.json建好后是空文档,使用时会报错,加入{}即可
(2)在app.json中注册新页面
注意:不要带扩展名
(3)index.wxml中添加跳转按钮,同时在index.js文件中添加事件处理。
至此,与新页面配置有关的工作完成。接下来就是设计新页面了。
(1)在newpage.json中添加内容 (具体内容根据要求来设计),在这里只是简单的实践一下。
{ "navigationBarBackgroundColor": "#FCA454", / "navigationBarTitleText": "这个是新添加的页面" }
(2)在newpage.wxml中添加显示的内容
<!--newpage.wxml--> <view class="container"> <view class="txtInfo"> 祝贺你学会新添加页面了! </view> <view>{{info}}</view> <view>{{welcome}}</view> </view> (3)在newpage.wxss中添加样式
.container{ width:100%; height:100%; background-color: #34ACE0; color:white; } .txtInfo{ font-size:18px; font-family: 微软雅黑; } (4)在newpage.js中添加数据处理
//newpage.js Page( { data:{ info:'我正在学习微信小程序开发!' }, onLoad:function() { var that=this //页面加载的时候初始化 that.setData({ 'welcome':'欢迎加入微信小程序课程学习!' }) } } )
OK,动手练习一下吧
