The pitfalls encountered in learning uni-app

HBuilder X associated WeChat applet:

        The port of the WeChat applet needs to be configured (because the port of the WeChat applet will change every time it is opened)

Start error:

Go to the WeChat applet tool:

 add page

 Below: the pages.json project directory is:

{
	"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"
			}
		]
	}
}

 Develop a direct page

When the system becomes more and more complex, it is troublesome to debug and jump to the page. At this time, the configuration of the direct page is required

Because it is a page, it is still configured in page.json

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

 At this moment, there is an optional details page in the applet.

Use plugin: uni-list list, @click invalid

In development, the opportunity will definitely use list display, but unlike the usage in 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>

The need to use the list is as follows:

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