这个微信小程序也出来好长时间了，一直想做一个属于自己的小程序，这不说动手就动手实现一个吧，比较简易，中间也遇到不少问题，记录一下，方便以后自己查阅。

微信小程序的结构

默认没有这么些文件夹的，只有index ，然后这个标识 app 开头的文件都是一些全局的设置。可以自己查看下，都有注释，就从这个配置开始说。

修改启动页面

默认启动页面是index页面，如果要修改，打开app.json配置文件，在顶部你会发现有一个pages的配置，如下：

"pages": [

"pages/home/home"

只需要将我们的想要显示的页面的路径写在 第一个 就可以成为启动页，特别注意路径一定要正确。

当然你会新建很多页面，所有的页面都必须写在这个里面，不然跳转的时候会找不到。

底部tab栏切换

就是底部tab栏切换,同样还是在app.json 配置文件中修改如下：

  "tabBar": {
  "color": "#333333",
  "selectedColor": "#2B91D8",
  "backgroundColor": "#eee",
  "borderStyle": "white",
      "list": [
    {
  "pagePath": "pages/home/home",
  "text": "首页",
  "iconPath": "pages/home/images/tab_icon_home_nor.png",
  "selectedIconPath": "pages/home/images/tab_icon_home_pre.png"
    },
    {
  "pagePath": "pages/myCenter/myCenter",
  "text": "我的",
  "iconPath": "pages/home/images/tab_icon_center_nor.png",
  "selectedIconPath": "pages/home/images/tab_icon_center_pre.png"
    }
  ]
},

这里的 pagePath 就是页面的路径，text文字，iconPath图标，注意图片一定要带后缀，selectedIconPath点击态的图标，各自换成你自己的就行，问题不会太大。

加载中

如下：

有标签可以直接显示这个,在wxml文件中编写：

<loading hidden="{{hidden}}" bindchange="loadingChange">  
       加载中...  
</loading>

可以控制显示还是隐藏，在.js文件中可以控制：

data: {
    hidden: false,
  }

可以在data 底下配置默认值，hidden: false 默认不显示，赋值的时候必须在这里面写：

that.setData({
    hidden: true
  })

网络请求

 wx.request({
//网络请求地址url
url: 'https://xx',
header: {
  // 'content-type': 'application/x-www-form-urlencoded'
  'content-type': 'application/json'
  // 'content-type': 'text/xml'
},
//请求头参数配置
data: {
  page: pageNo,
  timestamp: timeStamps

},
method: "POST",

success: function (res) {

  //xmlstring2json  是我使用第三方xml转json的一个库
  var xml2json = require('..//lib/xmlstring2json/dist/xml2json');
  var json = JSON.stringify(xml2json(res.data), null, 4);


  var jsonObject = xml2json(res.data);
  var jokeObject = jsonObject.root.joke
  //timestamp
  if(pageNo == 0){
    timeStamps = jsonObject.root.timestamp.text
  }


 // console.log('json::' + jsonObject.root.timestamp.text)
  // var data = new Array();
  // for (var i = 0; i < jokeObject.length;i++){
  //   var text = JSON.stringify(jokeObject[i].text).replace("#", "")
  //   //JSON.parse(text).text
  //   var value = JSON.parse(text).text;
  //   data.push(value)
  // }
  // console.log('data::：' + jokeObject[0].text.text );

  // var l =  jokeObject;
  var l;
  if(pageNo == 0){
    l = jokeObject

  }else{
    var l = that.data.list;
    for (var i = 0; i < jokeObject.length; i++) {
      l.push(jokeObject[i])
    } 
  }
    //页面绑定的数据赋值
  that.setData({
    list: l
  })

  pageNo++

  that.setData({
    hidden: true
  })
},
fail : function(s){
  wx.showModal({
    title: '提示',
    content: '请求接口失败' + JSON.stringify(s)
  })
}

要进行网络请求，首先测试阶段可以将开发工具里的：

最后一个选项勾选上，不校验…,同时管理员还需在后台配置网络请求的域名，两个缺一不可。