开发工具：

FEF6E576-5520-401C-B59F-E741FB882AEE.png

下载地址(里面有mac和windows的，mac版的没有网好像就用不了还一直弹网络错误，只能强制退出，windows版本的没网也能用。针对mac版本没网不能用要给差评)：微信小程序开发工具
开发文档：官方简易教程以及框架组件API文档

今天尝试着弄了下，没有做到面面俱到，网上很多人都已经做了完整的小程序了，而我这个顶多是个demo，人比较笨，但是笨鸟也要飞，也得学，慢慢来嘛！
如图：

![Uploading 347EE33B-FE8C-44C0-A688-5A69B8C812F3_245844.png . . .]

通过此文你将知道开发微信小程序时怎么进行页面跳转、弹出框、设置顶部导航栏、（.js、.json和.wxml和.wxss文件分别做什么事以及他们的关联）、底部菜单栏等等功能。

1.设置底部菜单：
在app.json文件中添加tabBar节点，如果新建项目的话，是没有的，需要自己手动添加。注意：实际上项目中是不能写注释的哈。下面有注释，方便这里阅读。保证写完之后这个.json文件里面的内容是json格式。

"tabBar": {
"color": "#9f9f9f",//默认颜色
"selectedColor": "#95BB57",
"borderStyle": "white",//菜单栏上面的一条线，默认是black，黑的
"backgroundColor": "#F8F8F8",
"list": [{//这个list就是下面的各个菜单，按先后顺序来的，如果不设置pagePath的话，运行的时候回报错，但也能跑。不设置iconPath的话，菜单栏的高度会比正常的要矮一些。这里要注意的是pagePath的值要在这个json文件的pages节点里注册。
  "pagePath": "pages/home/index",
  "iconPath": "images/A-home@2x.png",
  "selectedIconPath": "images/B-home@2x.png",
  "text": "首页"
}, {
  "pagePath": "pages/xcfw/xcfw",
  "iconPath": "images/A-xcfw@2x.png",
  "selectedIconPath": "images/B-xcfw@2x.png",
  "text": "行程"
},{
  "pagePath": "pages/kf/kf",
  "iconPath": "images/A-kf@2x.png",
  "selectedIconPath": "images/B-kf@2x.png",
  "text": "客服"     
},{
  "pagePath": "pages/my/my",
  "iconPath": "images/A-my@2x.png",
  "selectedIconPath": "images/B-my@2x.png",
  "text": "我的"
}]

}

2.设置顶部导航栏
首先需要将页面创建好，并在app.json中注册页面。

ED46EDD9-D5A6-439D-B9A6-161512C6B144.png

分别创建js、json、wxml和wxss文件。这里就要各个文件的作用了，wxml文件负责界面显示，布局代码都放在这里面。wxss文件就相当于css文件了，样式文件，里面写样式代码。json文件里面可以写一些配置相关的代码，比如设置该页面的标题啊返回按钮什么的。js文件负责逻辑，比如界面上按钮点击事件，加载网络什么的，很强！

同样是在app.json里面设置顶部导航栏的相关属性，很简单，添加一个window节点，并配置下面几个值就可以设置一个简单的带标题的导航栏了。

//设置顶部导航栏
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#44c296",
"navigationBarTitleText": "spring3g",   
"navigationBarTextStyle":"white"

}

3.页面跳转,关键代码wx.navigateTo({url:url})
举个例子，比如我点击头像，跳转到日志页面。

index.wxml文件里面布局代码，给头像的框绑定事件: bindtap='bindViewTap'

<view bindtap="bindViewTap" class="userinfo">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

再到index.js文件里的Page()里面写事件处理逻辑，../表示当前index.js所在文件夹目录的上级目录。意思就是说，我要去的页面是在index.js文件的上层目录的logs目录下的logs文件.

  Page({  
      //事件处理函数
      bindViewTap: function() {
          wx.navigateTo({
          url: '../logs/logs'
      })
  })}

4.弹出框，这个比较坑，我开始以为是直接在js文件里面写个什么alert啊confirm之类的方法就能调出来。可实际上不是哈！
首先，在wxml里面需要写如下代码，{{title}}会从js文件里面的Page里面的data节点去获取键为title的值来显示，这里也可以直接是字符串。

 <modal title="{{title}}" confirm-text="{{ok}}" cancel-text="{{cancel}}" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
        {{modalText1}}
 </modal>
 <view class="btn-area">
        <button type="default" bindtap="modalTap">{{abcd}}</button>    
 </view>

然后在js里面写上对应的方法，类似事件处理一样一样的。modalChange处理弹出匡。需要注意的是，modalHidden如果不在js里的Page里面的data里面设置为true的话，页面加载的时候这个框就会弹出来。modalTap事件里面设置modalHidden为false，那么modalChange事件里面就很好处理了：设置modalHidden为true就可以了。

modalTap: function(e) {
    this.setData({
       modalHidden: false
    })
},
modalChange: function(e) {
     this.setData({
        modalHidden: true
     })
}

如果你有html开发经验，那你就写个css必定。上手小程序布局也应该会很快的。如果没有相关经验，没关系，这个其实挺简单的。

这个是我花了两个多小时从小白到能上手的一个demo截图。

gggg.gif