小程序-demo：天气预报

Posted 2020-12-31 storebook

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/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。