学习uni-app遇到的坑

HBuilder X 关联微信小程序：

        需要配置微信小程序的端口（因为微信小程序的端口每次开启都会变化）

启动报错：

到微信小程序工具中：

 添加页面

 以下：pages.json项目目录为：

{
	"pages": [ 
		{
			"path": "pages/tabbar/tabbar_1",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/tabbar/tabbar_2",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/tabbar/tabbar_3",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}
	],//总共三个页面
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": { //设置底边的tabBar，点击每一个按钮，则切换到对于的页面
		"color":"#00E5EE",
		"selectedColor":"#FFA07A",
		"backgroundColor":"#E0FFFF",
		"list": [{
				"pagePath": "pages/tabbar/tabbar_1",
				"text": "首页",
				"iconPath": "static/首页-未选中.png",
				"selectedIconPath":"static/首页-选中.png"
			},
			{
				"pagePath": "pages/tabbar/tabbar_2",
				"text": "工具",
				"iconPath": "static/工具-未选中.png",
				"selectedIconPath":"static/工具-选中.png"
			},
			{
				"pagePath": "pages/tabbar/tabbar_3",
				"text": "个人",
				"iconPath": "static/我的-未选中.png",
				"selectedIconPath":"static/我的-选中.png"
			}
		]
	}
}

 开发直达页面

当系统越来越复杂时，调试跳转页面麻烦，这时候需要直达页面的配置

因为是页面，所以仍在page.json中配置

//在pages.json的最外层配：
"condition": {
		"current": 0,
		"list": [
			{
				"name": "详情页",
				"path": "pages/detail",
				"query": "id=80"
			}
		]
	}

 此刻小程序中就有这个可以选择的 详情页。

使用插件： uni-list 列表，@click失效

开发中机会一定会使用列表展示，但不像view中的用法使用click

        <view class="item" @click.native="gotoPage(1)">
			<image class="icon" src="@/static/index_img/身份证.png" />
			<text class="label">身份证</text>
		</view>


<script>
	// import log from "@/static/js/wx_log.js"

	export default {

		data() {
			return {
				
			}
		},
		methods: {
			gotoPage(message, event) {
				console.log('按钮被点击', message, event);
				uni.navigateTo({
					url: '/pages/tabbar/tabbar-1/image-deatil/image-deatil'
				})
			}
		}
	}
</script>

使用列表的需要如下：

#需要将其设置为 可点击：clickable=true
<uni-list>
			<uni-list-item class="shadow-item" title="一寸" note="尺寸 25x35 像素 700x980px" clickable=true
				@click="gotoPage(1)"></uni-list-item>
<uni-list>