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

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