uni-app 开发百度小程序笔记

1.flex布局

使用 justify-content: space-between 的时候，可以用 flex-wrap：wrap 换行显示

2.小程序中使用z-index

小程序中使用z-index，要给当前层级加上position属性，不然z-index不生效；

3.css 实现文字两端对齐

text-align: justify;  
text-align-last: justify;

4.提交表单，发起网络请求

uni.request

1、url 填写表单提交后请求的地址
2、由于POST和GET传送数据的方式不一样
    POST的header必须是
    
    "Content-Type": "application/x-www-form-urlencoded"  
    GET的header可以是
    
    'Accept': 'application/json'
3、一定要写明method：“POST” 默认是“GET”，保持大写
4、这里的data就是POST给服务器端的数据 以{name:value}的形式传送
    data:{name:e.detail.value.name,tel:e.detail.value.tel,password:e.detail.value.password}

5.H5本地调试有跨域问题

需要安装插件：Allow-Control-Allow-Origin: *

参考：ask.dcloud.net.cn/article/352…

使用方式:

打开待调试的页面
在扩展栏目找到安装的插件，点击打开插件配置
输入想要进行跨域调试的接口的地址，点击添加即可

6.文章列表点击跳转到详情页

列表页代码片段：

    <!-- 文章列表 -->
    <templete>
    	<view class="content-list" v-for="article in articles" :key="article.id" @click="toArticleDetail(article.id)">
    		<listItem
    		    :content_list_title="article.title" 
    		    :content_list_abstract="article.abstract"
    		    :methods_image="article.thumbnail">
    		</listItem>
    	</view>
    </templete>

	// 跳转到其他文章详情
	<script>
	export default {
    	methods: {
        	toArticleDetail(e) {
        		let id = e
        		uni.navigateTo({
        			url: '/pages/detail/detail?id=' + id,
        			success: res => {
        				console.log(id) // 打印要传递的参数id
        			},
        		});
        	}
    	}
	}
	</script>

详情页代码片段：

    <script>
	export default {
            onLoad(option) { //option为object类型，会序列化上个页面传递的参数
        	this.id = option.id
        	console.log(option.id) //打印出上个页面传递的参数id。
        	this.getArticle() //获取详情内容
            },
	}
    </script>

7.input组件在百度小程序的问题

1.当添加value=""时，百度小程序页面输入框会显示true，placeholder=""也是一样，会显示true字样，在微信小程序和H5都是正常显示为空的;

2.表单内同时使用input和picker组件时，如果input组件内添加了value绑定(:value="valuename")，那么在picker组件选择完值并更新之后，input组件中已填好的值将会被清空;

8.防止表单重复提交的验证方法

使用本地缓存来实现：uni.setStorageSync(KEY,DATA) 和 uni.getStorageSync(KEY)，下面是代码块示例

formSubmit: function(e) {
	let phone = e.detail.value.phone //以提交数据中的phone为判断依据
	if (phone != uni.getStorageSync('phone')) {//如果本地缓存中没有这个phone号码，就执行提交请求
		uni.request({
			url: 'https://domain.com/',
			method: 'POST',
			data: {
				phone: e.detail.value.phone,
			},
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			}, 
			success: res => {
				console.log(res.data);
				uni.setStorageSync('phone', phone); //提交成功，将phone存储在本地缓存中
				uni.showToast({
				  title: '提交成功',
				  icon: 'success',
				  duration: 2000
				})
			}
		});
	} else {
		uni.showToast({
		  title: '您已成功提交，无需重复提交！',
		  icon: 'none',
		  duration: 2000
		})
		setTimeout(function(){
		  uni.hideToast()
		},2000)
		console.log(phone)
	}
},