开发uniapp 小步调时遇到的题目

1、【微信开发者工具报错】routeDone with a webviewId XXX that is not the current page

办理方案:
在app.json 中添加 “lazyCodeLoading”: “requiredComponents”
uniapp的话加到manifest.json下的mp-weixin
外部链接文章：办理方案文章1
办理方案文章2

1. "mp-weixin" : {
2.     "appid": "wx0dd22774d88e0546",
3.      "setting" : {
4.          "urlCheck" : false
5.      },
6.      "usingComponents" : true,
7.      "libVersion": "latest",
8.      "lazyCodeLoading": "requiredComponents",//添加此行代码
9.      "requiredPrivateInfos":["getLocation"],
10.      "permission": {
11.          "scope.userLocation": {
12.              "desc": "将获取你的具体位置信息，用于准确为您提供所在范围内的服务信息"
13.          }
14.      }
15. },

复制代码

2、【微信开发者工具报错】[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, string

办理方案:添加"libVersion": "latest",
外部链接文章：办理方案文章
3、【微信开发者工具报错】安装pinia后编译项目报错“hasInjectionContext“ is not exported by “node_modules/vue-demi/lib/index.mjs“

办理方案:将pinia的版本改成2.0.36 固定版本
外部链接文章：办理方案文章
4、【微信开发者工具报错】＜script＞ and ＜script setup＞ must have the same language type办理

因为想在app.vue 中添加globalData 而产生了报错 ，
办理方案:需要添加 lang='ts'
在添加globalData的时候发现 globalData 只能在App.vue中使用vue2的方式使用 vue3的ts中不能使用 想要全局变量还可以放在pinia中

1. <script lang='ts' >
2.   export default {
3.     name: 'CustomName',
4.     inheritAttrs: false,
5.     customOptions: {},
6.     globalData:{
7.             baseUrl:'https://api-policy.dev.v2.chinawip.com'
8.           }
9.   }
10. </script>
11. <script setup lang='ts' >
12. // ............
13. </script>

复制代码

外部链接文章：办理方案文章
5、uniapp+vue3+setup语法糖开发微信小步调时不能界说globalData的办理方法

办理方案:setup语法糖和 vue2的语法混合使用 例如如上边的界说globalData的使用
**外部链接文章：办理方案文章

6、vscode px转rpx乐成办理办法

vscode 安装 插件我安装的px to rpx

然后去设置里设置一下，改为375即全部设置完成。

7、微信小步调getLocation报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in

在开发地图时使用到了uni.getLocation,此时需要在uniapp的下 添加 ：加到manifest.json下的mp-weixin添加"requiredPrivateInfos":["getLocation"],如许就会出现下边的弹窗
还需要添加 "permission": { "scope.userLocation": { "desc": "将获取你的详细位置信息，用于准确为您提供地点范围内的服务信息" } },如许才气使用

1. uni.getLocation({
2.       //type: 'wgs84',
3.       type: 'gcj02',
4.       success: (res:any)=>{
5.         // console.log(res);res.latitude res.longitude
6.         
7.       },
8.       fail: (res)=>{
9.         console.log('用户拒绝授权获取位置信息,使用默认经纬度');
10.         
11.       },
12.       complete: (res)=>{
13.         // console.log(res);
14.         // 根据位置数据更新页面数据
15.       }
16.     });

复制代码

8、在使用scroll-view实现横向滚动时不能的滚动的办理方法

   1、在scroll-view标签上加上样式属性：display: flex; white-space:nowrap；
2、scroll-view标签下的一级栏目标签需要加上样式属性：display: inline-block;
只有团结上面两步，才气实现横向滚动。

1. <!-- 下列代码未加规范，仅供参考，请勿模仿 -->
2. <scroll-view scroll-x style='display: flex;white-space:nowrap;' class=''>
3.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: red;'></view>
4.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: blue;'></view>
5.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: green;'></view>
6.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: orange;'></view>
7.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: yellow;'></view>
8.   <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: black;'></view>
9. </scroll-view>

复制代码

9 、Pinia报错: “getActivePinia was called with no active Pinia. Did you forget to install pinia?“pinia访问其他store的action报错：未初始化调用getActivePinia()

因为想在app.vue中引入store 而导致的报错 ，以是不能在app.vue中引入store中的数据 。
总结 在app.vue中使用pinia store时, pinia插件还没被vue框架初始化。
   如果想办理 试试下边的两篇文章的方法
  外部链接文章：办理方案文章1
办理方案文章2
10、小步调正式版报错600002 url not in domain list

缘故原由是没有在小步调后台设置服务器域名
外部链接文章：办理方案文章
11、JSON 解释题目 办理红色波浪线

在vscode面板中，点击右小角设置按钮→点击设置→在搜索设置中搜索“文件关联”→找到Files: Associations的设置项→点击添加项→把 manifest.json 和 pages.json 设置为 jsonc即可；
12、微信小步调uniapp+vue3+ts+pinia的环境搭建

外部链接文章：微信小步调uniapp+vue3+ts+pinia的环境搭建
13、uniapp中获取位置信息处置惩罚

外部链接文章：uniapp中获取位置信息处置惩罚

• 页面中使用
  

1.   const isShowLocationControl = ref(false)//是否展示定位控件
2.   const defaultLatitude = "34.343119"
3.   const defaultLongitude = "108.93963"
4.   const isOpenSetting = ref(false); // 是否打开设置界面
5.   // 获取定位，兼容用户拒绝授权及相关处理（获取用户当前的授权状态 => 未同意授权位置时，引导用户打开设置界面，重新选择授权功能 => 允许后重新获取位置）
6.   const doGetLocation = async () => {
7.     isOpenSetting.value = false;
8.     uni.getSetting({
9.         success: (settingRes) => {
10.           console.log(settingRes)
11.           // 判断用户未同意授权位置时，提示并引导用户去打开设置界面，用户可重新选择授权功能
12.           if (!isOpenSetting.value && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
13.             uni.showModal({
14.               title: '需要授权获取您的位置信息',
15.               content: '你的位置信息将用于为您提供更合适您的服务',
16.               success: (data) => {
17.                 if (data.confirm) {
18.                   isOpenSetting.value = true;
19.                   // 打开设置界面
20.                   uni.openSetting({
21.                     success: (response) => {
22.                       if(response.authSetting['scope.userLocation']){
23.                         console.log('重新授权获取位置信息-同意');
24.                         // 重新获取定位
25.                         getLocation();
26.                       }else{
27.                         console.log('重新授权获取位置信息-未同意');
28.                         doGetLocationAfter({
29.                           latitude : defaultLatitude,
30.                           longitude : defaultLongitude,
31.                           isOpenSetting : isOpenSetting.value,
32.                         })
33.                       }
34.                     },
35.                     fail:()=>{
36.                       console.log('openSetting接口调用失败的回调函数');
37.                     }
38.                   })
39.                 } else if (data.cancel) {
40.                   console.log('showModal接口：用户点击取消未打开设置界面');
41.                   doGetLocationAfter({
42.                     latitude : defaultLatitude,
43.                     longitude : defaultLongitude,
44.                     isOpenSetting : isOpenSetting.value,
45.                   })
46.                 }
47.               },
48.               fail: function(){
49.                 console.log('showModal接口：调用失败的回调函数');
50.               }
51.             });
52.           }else{
53.             // 重新获取定位
54.             getLocation();
55.           }
56.         }
57.       })
58.   }
59.    // 获取位置
60.   const getLocation = () =>{
61.     uni.getLocation({
62.       //type: 'wgs84',
63.       type: 'gcj02',
64.       success: (res:any)=>{
65.         // console.log(res);
66.         doGetLocationAfter({
67.           latitude : res.latitude,
68.           longitude : res.longitude,
69.           isOpenSetting : isOpenSetting.value,
70.         })
71.         if(!isShowLocationControl.value){
72.           isShowLocationControl.value = true
73.         }
74.       },
75.       fail: (res)=>{
76.         console.log('用户拒绝授权获取位置信息,使用默认经纬度');
77.         isShowLocationControl.value = false
78.         doGetLocationAfter({
79.           latitude : defaultLatitude,
80.           longitude : defaultLongitude,
81.           isOpenSetting : isOpenSetting.value,
82.         })
83.         // 根据位置数据更新页面数据
84.       },complete: (res)=>{
85.         // console.log(res);
86.         // 根据位置数据更新页面数据
87.       }
88.     });
89.   }
90.   // 最终获取到的信息数据
91.   const doGetLocationAfter = (data:{latitude:string,longitude:string,isOpenSetting:boolean}) =>{
92.     if(data.latitude != houseListParams.value.latitude || data.longitude != houseListParams.value.longitude){
93.       houseListParams.value.latitude = data.latitude;
94.       houseListParams.value.longitude = data.longitude;
95.       // 根据位置数据更新页面数据
96.       getHouseList()
97.     }else{
98.       // console.log('位置信息无变化');
99.       getHouseList()
100.     }
101.   }

复制代码

• 封装组件
  

1. // import { doGetLocation } from '@/utils/getLocation.js';
3. let isOpenSetting:any;
5. /**
6. * 获取定位，兼容用户拒绝授权及相关处理（获取用户当前的授权状态 => 未同意授权位置时，引导用户打开设置界面，重新选择授权功能 => 允许后重新获取位置）
7. */
8. export function doGetLocation(callback:any){
9.         isOpenSetting = false; // 是否打开设置界面
10.         // 获取用户当前的授权状态
11.         uni.getSetting({
12.                 success: (settingRes) => {
13.                         console.log(settingRes)
14.                         console.log(isOpenSetting)
15.                         // 判断用户未同意授权位置时，提示并引导用户去打开设置界面，用户可重新选择授权功能
16.                         if (!isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
17.                                 uni.showModal({
18.                                         title: '需要授权获取您的位置信息',
19.                                         content: '你的位置信息将用于为您提供更合适您的服务',
20.                                         success: (data) => {
21.                                                 if (data.confirm) {
22.                                                         isOpenSetting = true;
23.                                                         // 打开设置界面
24.                                                         uni.openSetting({
25.                                                                 success: (response) => {
26.                                                                         if(response.authSetting['scope.userLocation']){
27.                                                                                 console.log('重新授权获取位置信息-同意');
28.                                                                                 // 重新获取定位
29.                                                                                 getLocation((data:any)=>{
30.                                                                                         callback({
31.                                                                                                 isOpenSetting:isOpenSetting,
32.                                                                                                 ...data
33.                                                                                         })
34.                                                                                 });
35.                                                                         }else{
36.                                                                                 console.log('重新授权获取位置信息-未同意');
37.                                                                                 callback({
38.                                                                                         isOpenSetting:isOpenSetting,
39.                                                                                         latitude : '',
40.                                                                                         longitude : '',
41.                                                                                 })
42.                                                                         }
43.                                                                 },
44.                                                                 fail:()=>{
45.                                                                         console.log('openSetting接口调用失败的回调函数');
46.                                                                 }
47.                                                         })
48.                                                 } else if (data.cancel) {
49.                                                         console.log('showModal接口：用户点击取消未打开设置界面');
50.                                                         callback({
51.                                                                 isOpenSetting:isOpenSetting,
52.                                                                 latitude : '',
53.                                                                 longitude : '',
54.                                                         })
55.                                                 }
56.                                         },
57.                                         fail: function(){
58.                                                 console.log('showModal接口：调用失败的回调函数');
59.                                         }
60.                                 });
61.                         }else{
62.                                 // 重新获取定位
63.                                 getLocation((data:any)=>{
64.                                         callback({
65.                                                 isOpenSetting:isOpenSetting,
66.                                                 ...data
67.                                         })
68.                                 });
69.                         }
70.                 }
71.         })
72. }
74. /**
75. * 获取位置
76. */
77. export function getLocation(callback:any){
78.         uni.getLocation({
79.                 //type: 'wgs84',
80.                 type: 'gcj02',
81.                 success: (res)=>{
82.                         console.log(res);
83.                         callback({
84.                                 latitude : res.latitude,
85.                                 longitude : res.longitude,
86.                         })
87.                 },
88.                 fail: (res)=>{
89.                         console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
90.                         callback({
91.                                 latitude : '',
92.                                 longitude : '',
93.                         })
94.                 },complete: (res)=>{
95.                         // console.log(res);
96.                         // 根据位置数据更新页面数据
97.                 }
98.         });
99. }

复制代码

14、uniapp 使用lottiefiles动画

1. <!-- canvas 的 width和height 必须设置 -->
2. <canvas id="Mycanvas" ref="canvas" type="2d" :style="{width:windowWidth+'px',height:windowHeight+'px'}" style="position: absolute;top: 0;z-index: -1;"></canvas>

复制代码

1. import { onLoad } from '@dcloudio/uni-app';
2. import lottie from 'lottie-miniprogram';
3. import animationData from "@/assets/myAnimation.json"
4. //获取设备的宽高进行等比例放大缩小
5. const windowWidth = uni.getWindowInfo().windowWidth
6. const windowHeight = windowWidth/375*812
7. onLoad(() => {
8.   init()
9. })
10. const init = () => {
11.   uni.createSelectorQuery().select('#Mycanvas').node(res => {
12.     const canvas = res.node
13.     //因为ui给的json文件的宽高是375*812的 所以这里把animationData的宽高给重新改了一下
14.     animationData.h = windowHeight
15.     animationData.w = windowWidth
16.     //此处的canvas的宽高也必须设置 ，
17.     // 页面中和此处的canvas必须设置宽高 不然会导致动画样式错误  这是我在开发中遇到的问题
18.     canvas.width = windowWidth//设置宽高
19.     canvas.height = windowHeight
20.     setTimeout(()=>{
21.       const context = canvas.getContext('2d')
22.       lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
23.       lottie.loadAnimation({//微信小程序给的接口
24.         loop: true,//是否循环播放（选填）
25.         autoplay: true,//是否自动播放（选填）
26.         animationData,
27.         // path:"",//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
28.         rendererSettings:{
29.           context,//es6语法：等同于context:context（必填）
30.           // preserveAspectRatio:"fill"
31.         }      
32.       })
33.     })
34.   }).exec()
35. }

复制代码

外部链接文章：办理方案文章1
办理方案文章2
15、uniapp 微信小步调地图map组件样式自界说

uniapp 微信小步调地图map组件样式自界说
16、在小步调中使用网络字体，和使用字体后ios生效，安卓不生效的题目

1.         @font-face {
2.           font-family: 'Barlow';
3.           src: url('https://img.cyeyi.com/realtor-mini/fonts/Barlow-Medium.ttf');
4.         }

复制代码

我是使用的网络字体的方法后发现ios生效，安卓不生效，缘故原由是跨域的题目导致的
外部链接文章：办理方案文章1
办理方案文章2
办理方案文章3
17、小步调获取机型

1. // 获取系统信息
2.   const systemInfo = uni.getSystemInfoSync();
4. // 获取设备机型
5. const platform = systemInfo.platform;
6. const paddingTop = ref(0)
7. // 判断机型
8. if (platform == 'ios') {
9.    console.log('当前设备是 ios');
10.    paddingTop.value = 0
11. } else if (platform == 'android') {
12.    console.log('当前设备是 android');
13.    paddingTop.value = 12
14. } else if (platform == 'windows') {
15.    console.log('当前设备是 windows');
16.    paddingTop.value = 0
17. }else if (platform == 'mac') {
18.    console.log('当前设备是 mac');
19.    paddingTop.value = 0
20. } else {
21.    console.log('当前设备是其他类型');
22.    paddingTop.value = 0
23. }

复制代码

18、MapContext.includePoints(Object object)用于将地图标记展示在可视区域内

官网地址
因为地图是整个页面，但是想展示的地图标记想展示在可视区域内以是就是使用了地图的includePoints方法，这个方法中有个padding属性
padding:坐标点形成的矩形边缘到地图边缘的间隔，单元像素。格式为[上,右,下,左]。开发者工具暂不支持padding参数。

1. let includePoints = data.map((item:HouseModel) => {
2.    return {
3.      latitude:Number(item.latitude),
4.      longitude:Number(item.longitude)
5.    }
6. })
7. mapContext.includePoints({
8.    points:includePoints,
9.    padding:[225,18,280,18]
10. })

复制代码

19、自界说展示地图标记上的气泡文字

1.         <map :id="mapId" :scale="14"  class="map" :latitude="houseListParams.latitude" :longitude="houseListParams.longitude" :markers="covers" :show-location="true" @markertap="markerClick">
2.          <view class="locationControl" v-if="isShowLocationControl" @click="controltap"><image class="locationControlImg" :src="globalDataStore.imgUrl + 'locationControl.png'"></image></view>
3.            <!-- 自定义展示气泡 -->
4.            <cover-view slot="callout" style="line-height: normal;">
5.              <cover-view class="customCallout" :marker-id="markerIdStyle.markerId">
6.                <!-- &thinsp; 解决ios文字展示不全  paddingTop 安卓展示问题-->
7.                <cover-view class="content" :style="{paddingTop: paddingTop+'rpx'}">{{markerIdStyle.markerTitle}}&thinsp;</cover-view>
8.              </cover-view>
9.            </cover-view>
10.          </map>

复制代码

在自界说过程中遇到的题目：

• 苹果手机文字末尾展示不全的现象
    办理方法： 我在文字的末尾添加了  让文字尽可能的展示出来
    HTML中&nbsp； &ensp； &emsp； &thinsp；等6种空白空格的区别
  
• 文字在ios上展示的没有题目，在安卓机上的高度展示有题目，内容整体靠上
    办理方法： 针对差别的机型 设置文字的上padding （padding-top）,来办理安卓机上文字展示的题目
  

20、封装requeset

1. import useglobalDataStore from "@/store/globalData"
2. const baseUrl = useglobalDataStore().baseUrl;
3. // globalData获取baseUrl
4. // const baseUrl = getApp().globalData.baseUrl;
5. let tokenAbnormal = false;
6. let apiList = <any>[];
7. let errorNum = 0;
8. const MAX_NUM = 3;
9. interface OptionsModel {
10.         url : string
11.         data ?: any,
12.         method ?: "OPTIONS" | "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "TRACE" | "CONNECT",
13.         callback ?: (value : any) => void;
14. }
16. class Request {
18.         // api在原型上,实例可以调用
19.         // private 只能在内部调用,外部是无法调用到api这个函数的
20.         private api<T>(options : OptionsModel) : Promise<T> {
22.                 return new Promise((resolve, reject) => {
24.                         let header : any = { 'content-type': 'application/json' }
26.                         let token = uni.getStorageSync("TOKEN");
27.                         if (token) {
28.                                 header.Authorization = token
29.                         }
31.                         uni.request({
32.                                 url: baseUrl + options.url,
33.                                 data: options.data,
34.                                 method: options.method || 'GET',
35.                                 header,
36.                                 timeout: 30000,
37.                                 dataType: 'json',
38.                                 responseType: 'text',
39.                                 success: (result : UniApp.RequestSuccessCallbackResult) => {
41.                                         let res = result.data as AnyObject // 拿到响应体
43.                                         if (res.code == 200) {
44.                                                 if (options.callback) {
45.                                                         options.callback(res.data)
46.                                                         return
47.                                                 }
48.                                                 resolve(res.data)
50.                                         } else if (res.code == 401) { // 代表未登录,或者是token过期,提示去登录页
51.                                                 uni.removeStorageSync('TOKEN')
52.                                                 apiList.push({ url: options.url, method: options.method || 'GET', data: options.data, header, timeout: 30000, callback: resolve })
53.                                                 if (!tokenAbnormal) {
54.                                                         errorNum++
55.                                                         tokenAbnormal = true
56.                                                         uni.login({
57.                                                                 success: (resLogin) => {
58.                                                                         console.log(resLogin, 'login');
59.                                                                         this.post({
60.                                                                                 url: `/realtor-mini-api/api/login`,
61.                                                                                 data: { code: resLogin.code }
62.                                                                         }).then(resLoginData => {
63.                                                                                 console.log(resLoginData, 'token');
64.                                                                                 uni.setStorageSync('TOKEN', resLoginData.token)
65.                                                                         })
66.                                                                 }
67.                                                         })
68.                                                         setTimeout(() => {
69.                                                                 if (errorNum < MAX_NUM) {
70.                                                                         apiList.forEach(item => {
71.                                                                                 this.api(item)
72.                                                                         })
73.                                                                 }
74.                                                                 tokenAbnormal = false;
75.                                                                 apiList = []
76.                                                         }, 1000);
77.                                                 }
78.                                         } else {
80.                                                 reject(res)
82.                                         }
84.                                 },
85.                                 fail: (error) => {
86.                                         reject(error)
87.                                 },
88.                                 complete: () => { }
89.                         });
91.                 })
93.         }
96.         get<T>(options : OptionsModel) {
97.                 return this.api<T>({ ...options, method: 'GET' })
98.         }
100.         post<T>(options : OptionsModel) {
101.                 return this.api<T>({ ...options, method: 'POST' })
102.         }
104.         put<T>(options : OptionsModel) {
105.                 return this.api<T>({ ...options, method: 'PUT' })
106.         }
108.         delete<T>(options : OptionsModel) {
109.                 return this.api<T>({ ...options, method: 'DELETE' })
110.         }
112. }
114. export default Request

复制代码

使用

1. import Request from "@/utils/request";
3. export interface LoginModel {
4.   token: string
5. }
7. export interface UserInfoModel {
8.   user_details: {
9.     mobile: number | string | null
10.   },
11.   realtor_details: {
12.     name: string | null,
13.     is_admin: number | null
14.     admin_name: string
15.   }
16. }
18. class UserRequest extends Request {
19.   // 获取token
20.   login(code: string) {
21.     return this.post<LoginModel>({
22.       url: `/realtor-mini-api/api/login`,
23.       data:{code}
24.     })
25.   }
26.   // 获取用户详情,需要请求头携带token
27.   getUserInfo () {
28.     return this.get<UserInfoModel>({
29.       url: `/realtor-mini-api/api/user/details`
30.     })
31.   }
32.   // 用户-授权手机号码登录
33.   saveMobile(code: string | number) {
34.     return this.post<null>({
35.       url: `/realtor-mini-api/api/phone`,
36.       data:{code}
37.     })
38.   }
39.   // 用户-退出登录
40.   logout() {
41.     return this.post<null>({
42.       url: `/realtor-mini-api/api/logout`,
43.     })
44.   }
45. }
47. export default new UserRequest

复制代码

1. import userApi from '@/api/user';
2. await userApi.saveMobile(e.detail.code)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告