整理第一次使用uniapp开发小程序遇见的问题

瑛觑
982 阅读9分钟

一 关于微信的appid

请按照如下步骤操作：

1、登录微信公众平台（mp.weixin.qq.com/）。

2、登录后点击左侧菜单栏下方的“设置与开发”中的“基本设置”，如下图：WX20220331-151141.png

3、然后就可以看到APPID了,如下图：WX20191126-134032.png

然后我是使用uniapp开发的 需要需要在 manifest.json 去配置APPid 如下图!

WeChatca0ba53839be070e9ff8c830ab540c7c.png

二 关于启动小程序

  1. 启动小程序 就点击运行==》运行到小程序==》然后就会开始调小程序的开发者工具（因为我前面说过是HBuilder开发的,使用原生的就自己在微信开发者工具启动也是一样的 注:使用HBuilder运行小程序的时候 记得去配置一下微信开发者工具的路径 如图

mac的路径可能有所不同 主要找到微信小程序开发工具的执行文件路径就行 配置：就点击运行==》运行到小程序==》运行设置里面

WeChat8c12362f5cb1a4d485ee0dec35aaeae2.png

这是在widos下 配置：找到工具===》设置里面!

WeChatd40ddb005d3095dfa8c52b4a4c1fff5f.png 2. 打开微信小程序开发者工具，并进行设置，如下：（如果不设置服务端口的话可能会启动不起）

配置：打开微信开发者工具===》设置===》安全==》开启就行 WeChat9ccd6c36856300c00dd737a142d97e09.png

三 微信小程序请求数据 报域名不在request下 如图

WeChate910b94ad7f0f039125b83b7531d3190.png 解决方案： 其实这个后面的文档已经给了解决办法

  • 打开微信小程序的官方
  • 登录
  • 后台的开发 开发设置
  • 找到服务器域名
  • 点击修改，把你要添加的接口添加进去就行 添加白名单 添加完成在小程序上面就可以看见 如下图

WeChat60abe57a444c4de3d4431b7208cbe81e.png

另外还有一个关于https的 这个设置 可以让本地避开一些限制 小程序开发常见错误及排除方法

  • 另外在 请求上面 强制要求请求全部为https！

四 关于微信小程序获取位置经纬度 信息

  • 在开发中，我使用的getLocation来获取当前位置的经纬度
  • 把这个方法写到你要应用的小程序文件夹中，写到js文件夹中，这个方法可以写到onLoad中，也可以写到onShow中
wx.getLocation({
	type: 'wgs84',
	success: function(res) {
		console.log(res.longitude, res.latitude);
	},
	fail: function(res) {
		console.log(res);
	}
});
  • 运行我们的小程序，你会发现会有一个弹窗
  • 报这个提示，说明你的app.json文件中没有声明permission字段（HBuilder在manifest.json里面去声明permission字段），我们只需要声明一下字段，然后进行一下配置就好了
"permission": {
    "scope.userFuzzyLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
},
  • WeChat4c7a4f4226a4d0e2769d6f5e6cbc7b2d.png
  • 完成以上操作以后，再次运行微信小程序，你就会发现有一个获取位置的弹窗，点击允许，就会获取到当前位置信息的经纬度了。

但在准备上线的时候 这个getLocation申请不下来 可能产品定位说明有问题 后面客服让我去申请了getFuzzyLocation 用法是一样的 注: - 这2个getLocation getFuzzyLocation都要去申请才可以上线了使用

四点一 因为需求不同 我这里后端给我做过处理我拿到经纬度 给他 他就给我返国家，城市等信息 但如果前端要获取的话用到第三方了（这里使用） 方案如下

  • 介绍一下如果接入腾讯地图实现
  • 需要注册腾讯地图账号
  • 打开 微信小程序JavaScript SDK | 腾讯位置服务 点击下面的申请密钥，假如你没有登录的话，就会出现一个让你登录的二维码，扫码登录或进行注册操作
  • 创建应用----完成登录和注册功能以后，我们就需要申请一个密钥（key）来进行操作了
  • 添加key WeChat80730ebccc7860b5a94c73289898fe1b.png WeChat325089fb7707729fd8f24d5fadbde358.png 操作完成后
  • 下载sdk文件 WeChatb3bbb40980d02dc4eac8c5f02dc2229c.png 下载完成后，把文件剪切到你的小程序项目的文件夹中 获取位置信息
  • 开始获取位置信息 剪切完成后，在你需要引用位置信息的模板中的js文件中进行配置
var QQMapWX = require('../../components/qqmap-wx-jssdk1.1/qqmap-wx-jssdk');
var qqmapsdk;
  • 其中require后面的路径为你sdk文件的路径
  • 在onLoad里面实例化API核心类
qqmapsdk = new QQMapWX({
      key: '刚刚申请的key'
});
  • 在使用的地方调用获取位置信息的方法
 qqmapsdk.reverseGeocoder({
    success: function(res) {
      console.log(res); 这里打印的就是需要的了
    }
})
  • 记得在app.jons里面配置 permission

WeChatd7d190e52cf97b1125e50bdb708b875c.png

五.关于微信小程序 getPhoneNumber获取手机号登录 （我这里是所有解析都在后端做处理 前端是这是参与了传递了参数）

  • 小程序前端页面
  • WeChat092784610194a9c88fcfa331fc01df77.png
 <button class="buttons" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>

getPhoneNumber(e) {
	console.log(e.detail.code) //拿到这个要通过去后端去解析
},
  • 通过wx.login获取code,换取后台传的openid
wx.login({
success: res => {
  console.log(res.code);
  拿到的code给后端
  }
})

方法2： 使用官网提供的https方法调用

1、wxml代码跟上面一样

2、js代码

getPhoneNumber(e){
let code=e.detail.code
// 获取小程序全局唯一后台接口调用凭据（access_token）
wx.request({
  url: 'https://api.weixin.qq.com/cgi-bin/token',
  data: {
    grant_type:'client_credential',
    appid:'',
    secret:''
  },
  method:'GET',
  success:(res)=>{
  let access_token=res.data.access_token
  wx.request({
   url: 'https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token='+access_token,
   data:{
     code:code
   },
   method:'POST',
   success:(res)=>{}
 })
 }
})
},

3、步骤

  • 需要的接口和参数

image.png

image.png

**注意：**调试基础库要在2.22.1以上（百度别人说的）

image.png

image.png **注意：**一开始我还想grant_type是什么，client_credentila是什么？结果发现grant_type参数值就是‘client_credentila’

image.png 注意： 我一开始把参数都放到data里面了，然后就一直获取不到电话号码，后面我看官网上面的请求地址，试着把access_token直接加到url里面，结果就成功了。 最后的写法：

image.png

六 关于小程序下拉刷新（列表页面下拉刷新 ，顶部不显示三个小点的刷新状态）

  • 首先是在对应的页面 json 中添加配置
    核心：
 "enablePullDownRefresh":true,
  "backgroundTextStyle": "dark"

如图 WeChat8835a4d9df2cce090212647e98adbcc7.png 如果你是使用HBuilder开发的然后编译的 那些就需要去pages.json下面配置一下就行也是差不多的 如图

WeChat45aa9a6720687b3f0abdd49e860715fd.png

  • 然后在页面对应的js中 去处理 onPullDownRefresh 函数 监听用户下拉刷新事件。
    /* 页面相关事件处理函数--监听用户下拉动作 */
    
    onPullDownRefresh: function () {
        this.onRefresh()
    },

    onRefresh(){
        //导航条加载动画
        wx.showNavigationBarLoading();
        this.store_lists()  //网络请求数据
        //超时隐藏
        setTimeout(function () {
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh(); //停止下拉刷新
        }, 2000);
    },

WeChat93842b7d6a97af6cc6b05afda96fa6f0.png

小程序 调用相机/相册扫码

// 允许从相机和相册扫码

wx.scanCode({
  success(res) {
    console.log(res)
  }

})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success(res) {
    console.log(res)
  }
})

七 关于在做微信小程序实现文件、图片上传功能 给我包 如下错

11011665458263_.pic.jpg

  • 这个域名我之前已经在域名当中配置过 具体原因还是因为小程序规定了上传图片 也是要配置uploadFile合法域名

WeChat666939d062958079d40a29ecfe9bd0ed.png

八 小程序中加载H5页面

  • 在小程序中加载H5页面需要通过小程序提供的 文档

  • 注意:在web-view中加载的页面的域名，需要在微信公共平台中配置业务域名，否则会在加载页面时给出非法业务域的安全提示，个人海外账号不支持 文档

  • 一个小程序最多配置20个安全业务域名；每个域名最多绑定20个小程序；

  • 一年内修改域名的次数不能超过50次（次数这个限制要注意了，所以输入域名的时候一定要谨慎一点) 添加成功后可以在微信开发者工具中详情信息中的域名信息中进行查看，分为几个分类包括request啊文件上传下载啊各种，建议都添加上，各个分类中相同的域名配置是算作一个的，不用担心在不同分类中配置相同的域名会占用20个业务域名的名额。 通过访问你设置的web-view的路由加上?url=encode之后的url就可以访问web-view页面了

九 小程序中调起拨号

wx.makePhoneCall({
  phoneNumber: '157234xxxxxx',
  fail: err => { // 调用拨打电话的时候点了取消，而取消 又未在fail里处理，错误就会抛出来。建议处理 
    console.log(err)
  }
})
  • uniapp的写法
uni.makePhoneCall({
   phoneNumber: '157234xxxxxx',
});

十 关于微信小程序的分包问题 文档

  • 因为我前面是使用uniapp来进行开发的 导致好多图片都放在本地 图片 代码体积已经到了20m 小程序规定不能主包不能超过2M限制 分包以后单独包最大不能超过2M；整个小程序可以达到20M
  • 首页 图片我尽量就使用cdn 或者后端返给我们 记得域名一样要配置 减少体积
  • 接下来开始分包 首先在app.json里面全局配置里面配置分包：（subpackages 属性和pages同级） uniapp就在pages.json里面 如下图
  "pages": [
    "pages/index/index",
    "pages/user/index",
  ],
  "subpackages":[
    {
      "root":"packageA", //分包的根路径，彼此之间不可以重复
      "name":"home",  	//分包的标识名字，用于预加载分包时用
      "pages":[		//分包的路径（不预加载的时候，用户进入分包路径才会加载分包资源）
        "shop_house/shop_house"
      ],
      "independent":false   //是否独立分包（可以不加载主包就独立加载的包，独立分包不能当做全局资源）
    }
  ],

不做预加载就按官方那个其实也可以 比较简单

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }
  ]
}
  • 然后接下来就是创建文件 也是一样在pages同级创建分包的根路径 我创建的就是分包就是packageA

WeChatabbe86eb75aa54cb6955eeb02040dde0.png 重新启动 就可以去微信开发工具查看分包情况

WeChatc93717d43cb908d959fef7546ce90726.png

  • 另外 需要注意的是 主包跳到分包的路径也是发生了改变 如果主包跳到分包 就要使用分包的路径 就是root这一级比如 /packageA/shop_house/shop_house
  • 分包跳转到主包 方法很多种 反正路径写对

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数。 此方法跳转的页面必须是在tabBar定义过的页面

wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面，路径后面可带参数。

十一 地图导航

<view class="gym_icon" bindtap="intoMap"></view>

  //为了调出地图导航
  intoMap(){
    wx.openLocation({  
      latitude: 22.85758,  
      longitude: 108.31476,
      name: "xxxx地址
      address:"xxxx地址",
      scale: 28
    })

  },
avatar
文章
阅读
粉丝