微信小程序部署到uniapp详细步骤

微信小程序部署到uniapp详细步骤

最近看到很多人问说有一套微信小程序代码，如何部署到uniapp，并且运行成h5。问这些问题可能对于行家来说都有些见到到不知道怎么表达了，由于我也是新手，才接触uniapp不久，我记得入手部署第一个项目的时候还是公司的研发产品，瞬间就方了，不过好在我有vue基础，看懂原理之后部署就很快了。首先，这个内容其实官方教程说的已经很详细了，可能对于刚接触又不懂vue的同行们有些吃力，所以写一个小demo演示一下。

1.一个现成的微信小程序代码

这里我写了一个最简单的helloworld例子来看一下。

index.wxml

<view id="test" bindtap="change">
{{text}}
</view>

index.js

Page({
  data: {
    text: 'Hello World'
  },
  onLoad:function(){  //一个生命周期函数
    wx.showToast({
      title: 'welcome',
      duration:5000
    })
  },
  change:function(){  //一个自定义事件函数，点击改变文字内容
    this.setData({
      text: "hello uniapp"
    })
  }
  
})

index.wxss

#test{
  color: red;
}

显示效果是这样的

2.部署到uniapp上

新建一个uniapp项目，选择默认模板包含以下文件，

将微信小程序代码复制粘贴到pages/index/index.vue这个文件中，vue自己生成的默认模板内容包含一个template，一个script ，一个style，粘贴到相应部分即可。

3.粘贴完成之后，就要把代码里小程序的语法修改成vue的语法

这里只涉及了几个修改点而已，我都有注释出来

<template>
	<view id="test" @click="change"> //bindtap修改为vue语法 @click
	{{text}}
	</view>
</template>
<script>
	export default {
		data() { 
			return { //vue的语法data是个函数
				text: 'Hello World'
			}
		},
		onLoad:function(){
		    uni.showToast({ //改为uniapp内置uni.
		      title: 'welcome',
		      duration:5000
		    })
		  },
		methods: { //vue的语法方法要写在methods里边
			change:function(){ 
			//vue中改变数据可以直接用this，注意这里的this指向
			    this.text="hello uniapp"
			}
		}
	}
</script>
<style>
	#test{
	  color: red;
	}
</style>

此时就算是部署好了，这套代码就是可以运行到小程序，h5，app等多个平台。

4.让uniapp运行到多平台有一个核心的编译手段就是条件编译，这里我就简单加了一点样式看一下效果.

把上一步的style标签里的内容改为

#test{
		/* #ifdef H5 */
	  color: blue;
	  /* #endif */
	  
	  /* #ifdef MP */
	  color: red;
	  /* #endif */
	}

同时运行都小程序和h5,显示出了不同效果

uniapp项目就是vue项目，所以懂得vue是关键，vue和微信小程序极其相似，学习的话官方文档比较好哦。

每天学习一点点，一个入门级菜鸟程序员的微末追求
附上研发项目：
完全uniapp开发的，有任何问题都可以讨论。