Convert applet code to uni-app code

Recently, due to the company's project reasons, it is necessary to convert the small program project into a uni-app project, so the following points are summarized:

First of all, you can go to the official website of uni-app to take a brief look at its introduction. The introduction of this article is for the conversion of simple WeChat applets.

Before that, let's take a look at the directory comparison

Here are the steps to transfer

1. First, you need to create a new uniapp project, and then create a directory under the pages file. Create it casually. It is also possible to keep the same project name as your applet. Then I will give an example here: I created a new directory demo under the pages file and created a demo.vue file under it

<template>
</template>
 
<script>
</script>
 
<style>
</style>

2. Configure its routing information in pages.json.

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "万景千言"
			}
		},
		
        
    ],

3. Then you can transfer

3.1. Copy the layout files under the applet.wxml to the <template> tag

3.2. Copy all the .wxss styles of the applet style file to the <style> file. The style here can be added with scoped to only reference itself to prevent the layout from being messed up. <style scoped>

3.3. The next step is to modify the usage of some attribute methods of the tag. Here I only introduce what I have encountered. If you have not introduced it, you can check it on the official website.

list rendering

Use it like this in the applet
<view class='item' wx:for="{
    
    {lesson}}" wx:key="ID" wx:for-item="item">
To use this in uni-app is the usage of vue
<view class='item' v-for="(item,index) in lessonto " :key="index">

Conditional statements

Use it like this in the applet

 <label id="btnCollect_40" data-id='{
    
    {item.ID}}' wx:if="{
    
    {item.iscollection}}">已收藏</label>
 <label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{
    
    {item.ID}}' wx:else>收藏</label>

To use vue usage in uni-app like this

<button v-if="item.iscollection" class="deletecolorto" type="primary" size="mini">已收藏</button>

Dynamic binding of class

Use it like this in the applet
<view class="div {
    
    {scope=='all'?'selected':''}}" catchtap='selecttype' data-type='all'>所有资料</view>
Use it like this in uni-app
<view class='itop' :class="{kai:item.isopen}">

click event

In the applet: use bindtap

 <label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{
    
    {item.ID}}' wx:else>收藏</label>

To use @click in uni-app like this

<view class="shareto" hover-class="shareto_on" @click='showPgFn'>

Pass data to the method

Use data- in applets (Using data- in applets The method of applets does not support direct data transfer)
 <view class="bookimage"  bindtap='ShowResourceList' data-id='{
    
    {item.ID}} '>
The method of passing data in uni-app is the same as that of vue
<view class="bookimage" @click='ShowResourceList(item.ID)'>

The event method reference document of the component is modified accordingly

4. The last step is to put the method written in js in the applet under the script tag

Declare data

In the applet, put it directly in data and use this.data.img to call

In uniapp you need to put the data in

Use of custom methods

The applet can be directly declared and used

bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },

Most of the uniapp can be used directly in the methods, and some special ones can be modified according to the actual situation.

	methods: {
			gototuiguang: function(options) {
				uni.navigateTo({
					url: '/pages/tuiguang/tuiguang', //要跳转到的页面路径
				})
			},
			getUserName(e) {
				console.log(e.detail.value.nickname); //用户输入或者选择的昵称
			},
			denglu: function() {
				uni.navigateTo({
					url: '/pages/login/login', //要跳转到的页面路径
				})
			},
		}

Probably summed up so much, if there are any mistakes, welcome everyone to give pointers! ! !

Convert applet code to uni-app code

Guess you like