一、小程序结构，vue语法

二、问题
1、取消app原生导航：

	pages.json文件下添加
		"app-plus": {
          "titleNView":false //取消app原生导航
        }

2、image 图片不显示

	<image src="../../common/img/logo.jpg"></image>//图片不显示
    <image :src="require('../../common/img/logo.jpg')"></image>//解决问题
    //图片必须放在static文件下，否则打包安卓不显示图片

3、alert（）安卓不能用，用官方提供的弹窗 官方地址

4、引入html

必须创建一个hybrid的文件夹，把html文件放到里面，img、css、js等资源要与html同在一个文件夹内，否则无法生效（引用）

//其他页面引用
<web-view src="/hybrid/html/left.html"></web-view>

5、组件
创建components文件夹（文件夹名称不能改），文件夹右键创建组件

其他页面直接引用

6、使用 web-view 页面之间互相通信
uni传值给web-view引入的html页面：
通过给链接传递参数
引入页面接受参数：

function getQuery(name) { // 获取uni传值
    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    // 一体机let会报错 换var就可以了
    let r = window.location.search.substr(1).match(reg);
    if(r != null) {
        // 对参数值进行解码
        return unescape(r[2]);
    }
    return null;
}
console.log(getQuery('token')); // 调用获取参数

uni监听web-view引入的html页面：
点击这里跳转查看

7、uni引入阿里图标库(iconfont)
点击查看uni引入阿里图标库(iconfont)

8、 app端可以使用plus (pc端会plus报错)
http://www.html5plus.org/doc/zh_cn/runtime.html
使用方法：直接调用就可以了

tiao (url) {
 // plus.runtime.openWeb(url);
  plus.runtime.openURL(url, function(res) {});
}

9、生成本地打包app资源缺少pages文件，离线打包之后没有页面

在 manifest.json 的 app常用其他设置 关闭 v3编译器 ，重新生成即可（现只有2.6.11版本支持非v3云打包，其他版本均强制用v3打包）

10、uni-app提示运行环境版本和编译器版本不一致的问题

解决方法 在manifest 源码视图添加

"compatible": {  
    "ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持  
}, 

即可隐藏提示框

11、修改checkbox样式
如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style=“transform:scale(0.7)”

调节其他样式 用组件自带class在app.vue里修改，其他页面修改不生效


12、app显示隐藏需要使用v-if，v-show不生效（2.6.16版本）

13、位置接口需要配置声明

在manifest.json里添加以下代码

"permission": {
 "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
}

14、

支付宝提示: "vendor.js:1198 The 'getLocation' method of platform '支付宝小程序' does not support option 'type'"

去掉uni.getLocation中的type

15、uniapp 支付宝小程序调不起导航app。
在 uni.openLocation 中添加 name 或者 address。

16、微信，支付宝小程序不支持v-html
可以使用uni的 rich-text 组件，
还可以去插件市场搜索富文本，功能更齐全。

<!-- <text v-html="item"></text> --> // H5
<!-- <rich-text :nodes="item"></rich-text> --> // H5 || 微信小程序

	// mp-html 插件市场下载的插件
	<mp-html :content="item.name"/> // H5 || 微信小程序 || 支付宝小程序

17、支付宝小程序input组件不支持 @click 事件

18、全局引入less
在App.vue 引入，只能使用样式，不能用变量、方法。
在根目录创建 vue.config.js 文件，从新编译。

// vue.config.js
let path = require('path');
let stylePath = path.resolve(__dirname, 'common/css/css.less') // less的路径
module.exports = {
	css: {
		loaderOptions: {
			less: {
				globalVars: {
					"hack": `true; @import "${stylePath}"`
				}
			}
		}
	},
}

19、全局引入js文件，
在根目录创建 common 文件夹，再里面创建全局js文件

// main.js
import all from "common/js/public.js";
Vue.prototype.all = all;

// 其他文件
this.all.xxx();

20、uniapp搜索关键字变色
搜索关键字变色，点击跳转

21、使用内置vueX
uniapp内置vueX,点击跳转

22、uniapp判断平台（微信小程序打开或支付宝小程序打开）
uniapp判断平台，点击跳转

22、uniapp自定义tabbar闪烁，tabbar图标闪烁
uniapp自定义tabbar，解决tabbat闪烁，点击跳转

23、一般列表内容过多都会用 “ overflow”，做一个溢出滚动。
但是外壳加了overflow之后触发不了触底加载（onReachBottom），解决办法，去掉overflow，目前没找到别的办法。

24、主包太大？，uni_modules组件分包
uni_modules组件分包，点击跳转

25、uni-data-picker，级联选择器自定义键值（修改text），使用map{text: xx, value: xx} 修改

<uni-data-picker placeholder="请选择产品" popup-title="选择型号" :localdata="dataTree" :map="{text:'label',value:'value'}" v-model="classes" @change="onchange" />

26、使用uni-file-picker获取图片临时地址，但是后端要求file格式，直接用uni.uploadFile上传，临时地址等同于file。

<uni-file-picker disable-preview file-mediatype="image" limit="1" title="上传封面" v-model="imageValue" @select="imgSelect"></uni-file-picker>

imgSelect(e) {
  uni.uploadFile({
     url: config.AGENT_URL + 'upload/uploadfile', //仅为示例，非真实的接口地址
     filePath: e.tempFilePaths[0],
     name: 'file',
     header: {
       'agent-token': store.getters.agentToken
     },
     success: (uploadFileRes) => {
       this.list.cover = JSON.parse(uploadFileRes.data).data
     }
   });
},

27、uni-forms 自定义rules 表单验证

// 去掉uni-forms-item 的 rules
<view class="foundation">
    <uni-forms-item required name="contact_tel" class="foundation-p">
      <view class="foundation-p">
        <text>客服电话</text>
        <input type="text" placeholder="请输入" v-model="list.contact_tel" />
      </view>
    </uni-forms-item>
</uni-forms>

data() {
  return {
	rules: {
	 contact_tel: {
	    rules:[
	      {required: true, errorMessage: '请填写客服电话'},
	      {
	        validateFunction(rule, value, data, callback) {
	          let iphoneReg = /^1[3456789]\d{9}$/
	          if (!iphoneReg.test(value)) {
	            callback('手机号码格式不正确，请重新填写')
	          }
	          return true
	        }
	      }
	    ]
	  }
	}
  }
},
onReady() {
 // 需要在onReady中设置规则
  this.$refs.form.setRules(this.rules)
},