小程序-demo:天气预报

ylbtech-小程序-demo:天气预报

 

1.返回顶部
1、app.js
//app.js
App({
  //系统事件
  onLaunch: function () {//小程序初始化事件
    var that=this;
    //调用API从本地缓存中获取数据
    that.curid = wx.getStorageSync(‘curid‘) || that.curid;//API:获取本地缓存,若不存在设置为全局属性
    that.setlocal(‘curid‘, that.curid);//调用全局方法
  },

  /*******************************************************/

  //自定义全局方法
  setlocal:function(id,val){
    wx.setStorageSync(id, val);//API:设置本地缓存
  },
  //自定义全局属性
  curid:"CN101010100",
  version:"1.0"
})
2、app.json
{
  "pages":[
    "pages/weather/weather",
    "pages/city/city"
  ],
  "window":{
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "天气预报",
    "navigationBarTextStyle":"#fff",
    "backgroundColor":"#666",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh":true
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#56abe4",
    "backgroundColor": "#ddd",
    "borderStyle":"black",
    "list": [{
      "pagePath": "pages/weather/weather",
      "iconPath": "images/tabbar/weather1.png",
      "selectedIconPath": "images/tabbar/weather2.png",
      "text": "天气预报"
    }, {
      "pagePath": "pages/city/city",
      "iconPath": "images/tabbar/city1.png",
      "selectedIconPath": "images/tabbar/city2.png",
      "text": "设置城市"
    }],
    "position":"buttom"
  }
}
3、app.wxss
/**app.wxss**/
.container {margin: 0; padding: 0;}
.title{font-size: 14px; font-weight: bold;}
4、project.config.json
{
    "description": "项目配置文件。",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.0.8",
    "appid": "wx7d22ab7088f2db6a",
    "projectname": "tianqi",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}
5、pages
6、images
7、
2. pages返回顶部
1、
a)
b)
c)
d)
e)
2、
a)
b)
c)
d)
e)
3、
a)
b)
c)
d)
e)
4、
a)
b)
c)
d)
e)
5、
a)
b)
c)
d)
e)
6、
3.返回顶部
6、
a)
b)
c)
d)
e)
4.返回顶部
 
5.返回顶部
 
 
6.返回顶部
 
7.返回顶部
 
8.返回顶部
 
9.返回顶部
 
10.返回顶部
 
 
11.返回顶部
 
技术分享图片 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

小程序-demo:天气预报

以上是小程序-demo:天气预报的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>