微信小程序的新页面设计和逻辑编写

xiaoxiao2021-02-28  112

(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,动手练习一下吧

转载请注明原文地址: https://www.6miu.com/read-68574.html

最新回复(0)