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

使用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.png 在template和style中使用../../static/image/back.png不会报错

uni-app标签使用问题

• Button标签

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

• Image标签
• 取消uni-app自带默认导航栏，详细说明见

在pages.json文件中添加navigationStyle

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

• 修改uni-app默认的导航栏标题文字内容，详细说明见

在pages.json文件中修改navigationBarTitleText

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