公众号迁移到原生小程序，需要怎么修改

一、需求介绍

公众号使用的是vue3，想要将公众号的功能迁移到微信小程序，要使用的是原生小程序开发

二、xml需要修改的内容

1、标签

（1）将所有的div标签替换成view或者text

（2）将所有的<img>标签替换为<image/>，同时要记住，<image/>标签中直接设置width和hight是无效的，如果非要在标签中设置，可以在通过<image style="width:20rpx; hight: 20rpx "/>的形式

（3）xml中的标签是需要有结束标签的，像<input> 之类的，需要加上斜杠：<input/>

2、指令

（1）循环和判断：vue中使用的循环是v-if，v-for和:key，但是在原生小程序中，需要改为wx:if

wx:for 和 wx:key

具体使用：

• v-for="item in StudentData"  :key="index " ===>  wx:for="{{studentData}}"  wx:key="index"，当然里面的项也只能用studentData.name，而不是item.name啦
• v-if="type === 'A'"  ===> wx:if="{{type === 'A'}}"

（2）v-model：在vue中，使用v-model可以实现双向绑定，但是在原生小程序中，双向绑定的情况更加复杂，可以我之前写的博客，里面涉及到了基本类型和复杂类型的双向绑定问题(57条消息) 原生小程序实现复杂对象的双向绑定(附代码可直接食用)_何七七KongKwan的博客-优快云博客

3、动态绑定

vue中的动态绑定是通过  :  来实现的，微信小程序使用 {{}} 

4、事件绑定

@click ===>  bindtap

除此之外，小程序中是不能直接传递参数的，也就是说 bindtap="handleChange(num)"是没带（不行）的，可以通过data-xxx的形式传参，再使用：e.currentTarget.dataset.xxx获得参数。

举个栗子：

xml：

<view wx:if="{{showtitles}}" data-show="false" bindtap="handletitles"></view>

js:

handletitles(e) {
    var show= e.currentTarget.dataset.show
    this.setData({
    showtitles: show
   })
}

 目前就想到这些啦，想到了再补充吧~欢迎大家和我一起补充。