1. Uni app Foundation

Official documents

1.1 what is uni app

• Uni app is a framework that uses Vue.js syntax to develop all front-end applications (also known as full-end development framework)
• The developer has written a set of code that can be distributed to iOS, Android, Web (response), and various small programs (WeChat / Alipay / Baidu / Kwai /QQ/ fast / nail / Taobao), fast application and other platforms.
• Technology stack: JavaScript, vue, wechat applet, uni app

1.2 advantages of uni app

Uni app has stronger advantages in 8 key indicators, such as the number of developers, cases, cross-end leveling, expansion flexibility, performance experience, surrounding ecology, learning cost and development cost

1. Cross platform and unlimited platform capability

2. Better operation experience

• Components and APIs are consistent with wechat applet
• Compatible with weex native rendering

3. General technology stack, lower learning cost

• Syntax of vue and api of wechat applet
• Embedded mpvue

4. Open ecology, richer components

• Support installation of third-party packages
• Support wechat applet custom components and SDK
• Compatible mpvue components and items
• App segment supports and native mixed coding
• Dccloud will release the plug-in market

2. Uni app actual combat

2.1 network request

1. calling the request function in page onLoad will be called after the page is loaded.

2. call the uni.showLoading method before request.

3. The request successfully calls the uni.hideLoading() method

		data() {
			return {
				news: []
			}
		},
		onLoad() {
			uni.showLoading({
				title:"Loading...."
			});
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					this.news = res.data;
					uni.hideLoading();
				},
				fail: () => {},
				complete: () => {}
			});
		},

2.2 template syntax

v-for loop dom element
@tap binding dom element click event on applet
: src enable bidirectional data binding
{{item.title}} template syntax

		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key='index'
				@tap="openInfo" :data-postId="item.post_id">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.author_avatar"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>

2.3 open page

1. First create the route of the new page in pages.json

	"pages": [ //The first item in the pages array represents the application startup page. Refer to: https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "news"
			}
		},
		{
			"path": "pages/info/info",
			"style": {
				"navigationBarTitleText": "info"
			}
		}
	],

2. Write the jump event openInfo

		methods: {
			openInfo() {
				uni.navigateTo({
					url: '../info/info'
				});
			}
		}

3. Bind @ tap click event on element

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key='index'
				// tap on wechat applet is a click event
				@tap="openInfo">

2.4 page reference

1. Pass the specified parameter on the element

<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key='index'
				@tap="openInfo" 
				// Data is transferred in the form of data - [parameter]
				:data-postId="item.post_id">

2. Encapsulate parameters on jump events

		  	// Pass an event event to get the data on the element
			openInfo(e) {
				let postid = e?.currentTarget?.dataset?.postid || '';
				console.log(postid);
				// Pass parameters through url splicing
				uni.navigateTo({
					url: '../info/index?postid=' + postid,
				});
			}

3. Obtain parameters on the jump page through props

		onLoad(props) {
			if (props?.postid) {
				uni.request({
					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + props?.postid,
					method: 'GET',
					data: {},
					success: res => {
						this.newitem = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}

2.5 simulation direct effect

By configuring condition in pages.json, you can modify the project directly to the specified page each time in the development environment.

1. Configure pages.json

	"condition": { //Mode configuration, effective only during development
	    "current": 0, //Currently active mode (index entry of list)
	    "list": [
	        {
	            "name": "test", // Mode name
	            "path": "pages/info/info", // Startup page, required
				"query":"postid=5310906" // Startup parameters, obtained in onLoad
	        }
	    ]
	}

2.ctrl+r runs to the test page.

3. Start test mode on the simulator.