uniapp开发小程序踩坑

随着微信小程序的流行，越来越多的开发者开始使用uniapp进行小程序的开发。虽然uniapp提供了许多方便的功能，但是也可能踩坑，下面就介绍一些常见的问题及其解决方案。

1. 使用vue-echarts组件

在使用vue-echarts组件时，经常会出现“Cannot find module 'echarts/lib/echarts'”这样的错误。这是因为echarts并没有完全打包，只打包了基本的核心模块。为了解决这个问题，我们需要引入echarts的完整模块。在main.js中引入以下代码即可：

```

import echarts from 'echarts'

import 'echarts/lib/chart/line'

import 'echarts/lib/component/tooltip'

import 'echarts/lib/component/title'

Vue.prototype.$echarts = echarts

```

2. 调用微信内置方法

在开发微信小程序中，我们经常需要调用微信内置的方法，比如wx.login、wx.getUserInfo等。但是在uniapp中，我们需要在manifest.json文件中增加以下配置：

```

"mp-weixin": {

"appSecret": "",

"appid": "",

"setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"minified": true,

"newFeature": true,

"coverView": true,

"nodeModules": true,

"autoAudits": false,

"showShadowRootInWxmlPanel": true,

"scopeDataCheck": false,

"uglifyFileName": true,

"checkInvalidKey": true,

"checkSiteMap": true,

"uploadWithSourceMap": true,

"compileHotReLoad": false,

"useMultiFrameRuntime": false,

"useApiHook": true,

"userConfirmedUseApiHook": false,

"packNpmManually": true

}

}

```

注意，需要填好自己的appid和appSecret。

3. 路由跳转

在使用uniapp进行路由跳转时，我们可以使用uni.navigateTo方法来进行跳转。但是，uni.navigateTo有一个限制，就是不能跳转到tabBar页面。为了解决这个问题，我们需要使用uni.switchTab方法来进行跳转，但是这个方法只能跳转到已定义的tabBar页面。如果需要跳转到未定义的tabBar页面，可以使用uni.reLaunch方法代替。

4. 上传文件

在进行文件上传时，我们需要使用微信提供的wx.uploadFile方法。但是，由于uniapp的限制，我们需要在manifest.json文件中增加以下配置：

```

"mp-weixin": {

"setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"minified": true,

"newFeature": true,

"coverView": true,

"nodeModules": true,

"autoAudits": false,

"showShadowRootInWxmlPanel": true,

"scopeDataCheck": false,

"uglifyFileName": true,

"checkInvalidKey": true,

"checkSiteMap": true,

"uploadWithSourceMap": true,

"compileHotReLoad": false,

"useMultiFrameRuntime": false,

"useApiHook": true,

"userConfirmedUseApiHook": false,

"packNpmManually": true,

"networkTimeout": {

"request": 5000,

"downloadFile": 5000

},

"navigateToMiniProgramAppIdList": ["wxeb7ec651dd0aefa9"]

}

}

```

注意，需要填写自己的appid。

5. 跨域解决方法

在进行跨域请求时，我们经常会出现“Failed to load resource: net::ERR_CONNECTION_REFUSED”的错误。这是因为小程序默认不支持跨域请求，我们需要在后台开发接口时设置允许跨域请求。同时，在前端代码中需要在请求头中增加Access-Control-Allow-Origin: *。

总结：

- 在使用vue-echarts组件时，需引入完整的echarts模块。

- 在调用微信内置方法时，需在manifest.json文件中加入相应的配置。

- 在进行路由跳转时，不能使用uni.navigateTo跳转到tabBar页面，需使用uni.switchTab或uni.reLaunch方法。

- 在上传文件时，需在manifest.json文件中加入相应的配置。

- 在进行跨域请求时，需要在后台开发接口时设置允许跨域请求，并增加Access-Control-Allow-Origin: *在请求头中。

以上就是一些常见的踩坑及其解决方法，希望可以对uniapp开发者有所帮助。