Briefly talk about the development of uniapp and uview component libraries together

Briefly talk about the development of uniapp and uview component libraries

uniapp is a cross-platform development framework based on Vue.js, which can simultaneously develop applications on multiple platforms such as H5, WeChat applets, and Apps. This can reduce the workload of developers and improve development efficiency.

Official website: https://uniapp.dcloud.net.cn/

uView is a UI framework dedicated to the uni-app ecosystem. uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, H5, and various small programs (WeChat /Alipay/Baidu/Toutiao/QQ/DingTalk) and other platforms (quote from uni-app.com).

Official website: https://v1.uviewui.com/components/intro.html

Tool: Hbuilder X

1. Install the uView component library

Installing by downloading makes it easier to read the source code, but you need to re-download and overwrite uview-uithe folder every time you upgrade.

Select 使用HBuilder X 导入插件or in the upper right corner of the uni-app plug-in market下载插件ZIP

If your project is a standard uni-app project created by HBuilder X, copy the downloaded uview-uifolder to the project root directory.

Plugin address: https://ext.dcloud.net.cn/plugin?id=6682

insert image description here

Then it is to introduce the style and components according to the official website;

You can use the http request that comes with uview

insert image description here

2. When Hbuilder X runs the project, there will be cross-domain problems when opening it with an external browser.

Find the file in the uniapp directory manifest.json, find the source code view, and add the following code

"h5" : {
    
    
        "devServer" : {
    
    
            "disableHostCheck" : true,
			"proxy":{
    
    
				"/api":{
    
    
					"target":"http://127.0.0.1:8080",
					"ws": true,
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
    
    
						"^/api": ""
					}

				}
			}
        }
    },

Then modify the configuration of baseurl

process.env.NODE_ENV === 'development' ? '/api' : 'http://127.0.0.1:8080'

But because I used the http request method that comes with uview's component library, I modified it in the interception configuration, but I found this problem later, and there will be a problem that will cause the cookie to be different, which will cause the interface to report an error and the session will expire! ! ! ! ! ! ! ! ! ! ! !

In the end, I had no choice but to use the built-in browser for development.

3. The problem that the WeChat applet of Set-Cookie cannot be automatically brought

After the login is successful, store the Set-Cookie locally, and then put it in the request header when requesting

uniapp has a judgment method to judge the current system operation,// #ifdef

// #ifdef MP-WEIXIN
	let sessionidStr = that.getSessionId(res.header['Set-Cookie'])
	let sessionid = "JSESSIONID=" + sessionidStr
	wx.setStorageSync('sessionid', sessionid); //保存Cookie到Storage
// #endif

The above code is the operation performed after the successful login, if it currently belongs to the WeChat applet. Save Set-Cookie locally

Then add it to the header information in the interceptor of the request

Vue.prototype.$u.http.interceptor.request = (config) => {
    
    
		// #ifdef MP-WEIXIN
			config.header.cookie =  wx.getStorageSync("sessionid");
		// #endif
	config.url = '/api' + config.url;
		return config;
		// 如果return一个false值，则会取消本次请求
		// if(config.url == '/user/rest') return false; // 取消某次请求
	}

4. CSS styles and local images fail

After running it on the WeChat applet, you will find that many styles written by yourself will become invalid. The suggestion is to use some of the built-in styles in the component library margin和padding.

For pictures, it is best to use an absolute path, so that the WeChat applet will not report an error

Wechat applet picture error

[渲染层网络层错误] Failed to load local image resource /uni_modules/uview-ui/static/image/videoCover.png 
 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 
(env: Windows,mp,1.06.2307250; lib: 2.33.0)

<u-image width="100%" height="230rpx" src="/static/image/videoCover.png"></u-image>

5. Video playback problems

We use the playback of EZVIZ Cloud. On the official website of EZVIZ Cloud, there are demos about the development of uniapp and WeChat applets. We can develop according to the demos.

However, the imported js of EZVIZ Cloud is relatively large, which is a bit uncomfortable compared to the small size package of the WeChat applet, and there are some problems with playback, so the best way to use the WeChat applet is to use the import WeChat The half-screen mode of the applet is used to play videos, but an application is required. For specific operations, please refer to the official website
insert image description here

Official website address: https://open.ys7.com/help/529

insert image description here

WeChat applet play: https://open.ys7.com/help/502

insert image description here
Code example for video playback:


var accessToken = op.accessToken;
        let player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container', // 视频容器ID
          accessToken: accessToken,
          url: op.playUrl,
          // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
          // template: 'simple',
          plugin: ['talk'], // 加载插件，talk-对讲
          width: windowWidth,
          height: windowWidth * 2 / 3,
        });
        that.playerInfo = player;

Briefly talk about the development of uniapp and uview component libraries together

Guess you like