vscode 与 uni-app 开发过程中遇到的坑

317

使用vscode开发uni-app项目

如何在vscode中使用uni-app 详情看这里

调用接口

尽量使用uni-app自带的访问接口,不然打包后会发生错误

uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

打包中遇到的问题

  • 打包后的文件本地不能打开的问题

需要在manifest.json文件中添加以下属性,然后使用npm run build编译打包

"h5":{
	"publicPath":"./"
},
  • static和assets中的文件路径问题
  • 使用static文件夹中的文件路径:static/image/back.png
  • 使用assets文件夹中的文件路径:../../assets/image/back.pngtemplatestyle中使用../../static/image/back.png不会报错

uni-app标签使用问题

  • Button标签

在项目中使用uni-app自带的Button标签,background:url(''); 存在问题,不会显示出来

在pages.json文件中添加navigationStyle

  "globalStyle": {
  	"navigationStyle":"custom" // custom即取消默认的原生导航栏
  }

在pages.json文件中修改navigationBarTitleText

  "pages": [
  	{
  		"path": "pages/index/index",
  		"style": {
  			"navigationBarTitleText": "XXX" // 修改成自己想要的名称XXX
  		}
  	}
  ],