uniapp写微信小程序_uniapp开发微信小程序

uniapp写小程序，本质上就是使用Vue的语法去写微信小程序，uniapp会把Vue语法编译成微信小程序识别的语法代码，及其各种平台识别的代码。

创建uniapp项目

HX新建uniapp项目 选择默认项目即可，命名，选择存放路径，创建

创建完以后，先运行下默认的项目看看。

点开项目的pages文件下的默认index.vue,然后点击编辑器菜单栏的运行，点击运行到微信小程序，就会自动打开微信开发者工具，首次进入需要打开工具的端口号

就是hx里面写代码，微信开发者工具里面看效果

查看uniapp默认界面显示没问题之后

删除index页面，并删除pagejson里面的index页面路径配置

在pages文件夹右键新建自己的页面文件夹，直接点击新建页面，弹出的窗口默认已勾选创建同名文件夹，注意，这里文件夹和文件名一样，同样还是一个页面就是一个文件夹

我们新建三个页面

每新建一个页面文件，就在pagejson里面吧这个页面路径写上，这个在hx里面直接新建页面会自动就写在配置里面

这个就是uniapp的tabbar页面跳转，类似vue路由

然后，官网找到tabbar配置页面跳转即可，进官网直接复制，这里注意的是，路径和图标一定要正确，否则tabbar直接就不显示

tabbar配置完了以后，配置下每一个页面的导航文字和样式

到此，页面就已经可以切换显示了

准备tabbar的图标

然后再微信开发者工具中查看

微信小程序的真机预览

点击微信开发者工具里的小眼睛就会生成预览二维码，微信扫码即可预览

如果你的小眼睛是灰的点不了，那是因为你的项目没有配置真实的APPID，去小程序后台找到自己的APPID，把原来的测试ID替换掉即可

小程序顶部标题栏的样式配置在pages.json里面，每一个是干啥的查看官网即可

页面单独配置标题栏样式，就在style对象里面，具体查官网介绍即可

然后，进入到每一个页面中写页面内容即可，其他的，就和vue开发一样，先写结构样式，样式使用less，先要在hx里面安装less插件，less没啥，变量，运算，嵌套，完了。

数据请求

请求使用的是一个 @escook/request-miniprogram 的插件，和axios一样，先npm下载到项目

npm  i  @escook/request-miniprogram

再在mainjs里面按需导入

Import  {$http}  from  "@escook/request-miniprogram"

然后挂载到uni对象上

uni.$http = $http

发请求的时候就是  uni.$http.get(请求地址)

如果请求不成功，并不是接口跨域什么的，注意，微信小程序的宿主环境是微信App，并不是浏览器，只有浏览器才会有跨域问题，微信小程序不存在跨域，这里请求不到是因为请求的接口域名没有在小程序后台配置，它不认识这个接口，解决方法是直接在微信小程序后台的开发配置里面配置上接口的域名即可

在request下配置接口的域名即可，注意可以配置多个域名，每一个之间分号隔开即可。

数据渲染v-for

传值，组件之间传值和vue一样，自定义属性，自定义事件，vuex跳转路径传值所带的参数通过接收方的onload函数的options参数接收

组件导入，uniapp的组件创建必须创建在components的目录下，默认没有这个目录，你需要手动新建这个目录，这个目录上右键直接就有新建组件，创建好组件之后，直接在任意页面以组件名为标签使用即可，并且，在uniapp插件市场导入的组件也会默认放在这个components目录下。

这个和Vue不同，uniapp组件不需要导入注册，创建好组件直接使用。

uniapp插件市场组件使用

在uniapp的插件市场找到你需要的插件，然后点击使用HX导入即可，然后使用方法和你自己写的组件一样，无需导入注册，直接看着插件的介绍使用即可。

例如

然后就会下载至components目录下

看着插件介绍在页面中使用它

剩下的基本就是一些uniapp api的使用了，用到啥去uniapp官网查看对应的说明介绍，看着写就行

写完以后，点击云打包可生成APP

微信小程序上传到微信公众平台小程序里面

小总结：

新建uniapp项目 --- 运行默认项目到微信小程序 --- 创建tabbar页面 --- 配置tabbar --- 写每一个页面的结构，样式和数据请求，渲染展示 --- 组件的创建和使用 --- 页面间的传值 --- uniapp插件（外部组件）的使用 --- 真机预览效果 --- 项目打包上传