微信小程序-记录

754 阅读3分钟

跟着某收费课程学习上手的小程序,遇到的更新迭代问题

1.计算器

2.天气

问题一:背景图片不能使用本地图片

/* background-image: url("../assets/img/bg.png"); 不能直接在wxss文件里引用本地图片,运行时会报错:“本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

A&Q

1.在网上使用图片转换成base64格式 tool.chinaz.com/tools/imgto…

 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+EAAAJuCAYAAADfKANfAAAgAElEQVR4nOz9aZrkOK4FiEryXNf7+TbQ+99Jh6nLTOKA4WAgKfPIusX8MtxEggA44xAitf///3//z7mJcJCnfd+vv9tLkhqh5Jul8WlfC3mN0RU9bPpDxGT5zwRP1nkqXYEwcNIfDqdTVa7+Hn83v13/s/L9MNn+nnr7HP8SDlAPbl935B+bPf6LDDRP+WPtyvcD6N71R3nQcu7H9XwIuvJ867XT+Uprl085Svz9Yy/zR3lmMn6Y***=');

-- 看着代码太长了 *** 更改起来太麻烦额

2.使用image标签

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class='background' src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

wxss中的样式

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  /*图片大小铺满*/
  z-index: -1;
  /*让图片置于最底层,不会影响其他部分*/
}

3.网络图片

找到一个可以存储图片的地址上传你所需要的图片,或者直接从网上拿到一张你喜欢的

问题二 高度设置100%,没有效果

设置图片为满屏

.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  /*图片大小铺满*/
  z-index: -1;
  /*让图片置于最底层,不会影响其他部分*/
}

A&Q

page{height:100%;}

问题三 位置信息 getLocation

onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 this.loadInfo(); },

loadInfo: function () {
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        console.log(latitude, longitude);
      }
    })
}

接着弹框提示

此时找到app.json 加上

"permission":{ "scope.userLocation":{ "desc":"位置信息" } }

A&Q

说明: 获取用户位置信息时需填写用途说明 在一些小程序/小游戏的业务逻辑中,有时需要依赖用户所在的地理位置来提供服务,当前开发者可以通过调用 调用 wx.getLocation / wx.authorize 等接口获取用户的地理位置信息或授权。

根据 iOS 系统对用户隐私保护的要求,同时我们也为了让用户可以更好的判断是否要将地理位置信息提供给开发者,故调整为当小程序/小游戏获取用户地理位置信息时,开发者需要填写获取用户地理位置的用途说明。填写的说明将在地理位置授权弹窗中展示

在 app.json 里面增加 permission 属性配置(小游戏需在game.json中配置)

申请百度地图的AK

lbsyun.baidu.com/

登录->控制台->同意->创建应用-> 在创建小程序的额时候使用的就是测试账号.没有appid

->提交

发布线上小程序请设置真实使用APPID

将鼠标移动到访问应用(AK) 出现点击复制(AK)

放入代码

 wx.request({
      url: 'https://api.map.baidu.com/geocoder/v2/?ak=复制的AK&location=' + latitude + ',' + longitude + '&output=json',
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res);
        var city = res.data.result.addressComponent.city;
        city = city.replace("市", "");
        page.setData({ city: city });
        page.loadWeather(city);
      }
    });

编译之后提示

如若已在管理后台更新域名配置,请刷新项目配置后重新编译项目,操作路径:“详情-域名信息” https://api.map.baidu.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

百度地图API 报错 "APP 服务被禁用", statusCode: 240

为啥禁用了 ******** why

换吧 换成高德平台

半途而废 不搞了

太麻烦了吧.对我这种新手作为教程极不友好...一个bug解决好久,也没有头绪 版本换的块,解决方式能不能提供一下..之前那种我觉得挺好理解的

=-= 好难过

看看第三章教程,希望不要这么难受

电影App