uni-app微信小程序——商城（1）

我这也是第一次在HBuilderX上使用uni-app框架来开发微信小程序，做一个微信商城的前端功能。

这篇文章主要是记录如何从开始创建项目到整体架构的搭建，还有如何使用第三方前端插件Vant Weapp，使页面更加美观，功能更加完善。对于uni-app的使用，很多都是vue的语法，对于学过vue的同学还是容易比较理解的。

如果以前只是接触微信小程序，使用微信开发者开发的同学来说，好多语法格式还有有一些不同的，比如微信小程序API中的wx:for在uni-app中就要改为v-for；再比如将数据存储在本地缓存中指定的 key 中，使用wx:setStorage(Object object)，而在uni-app中则是使用uni.setStorage(Object object)，等等......具体的内容，请参考uni-app提供的：微信小程序转换uni-app详细指南，里面有具体的介绍，可以帮助大家在更快的熟悉如何使用uni-app开发微信小程序。

好了，下面就开始我们的商城开发吧~

（1）创建项目

打开HBuilderX，选择文件->新建->项目，然后选择uni-app(U)，在选择模板的地方，你可以选择默认模板，或者内置uni-app的项目模板，如下图：

我们选择默认模板，然后创建，创建成功后，如下图所示：

上面就是创建完成后的架构内容。其中：

pages是存放业务页面文件的目录，

static是存放静态资源的目录，

unpackage是存放uni-app编译后的根目录，

components是存放uni-app组件的目录（还没有创建），

App.vue是应用配置文件，用来配置App全局样式以及监听应用的生命周期，

main.js是Vue初始化入口文件，

mainfest.json是配置应用名称、APPID、logo、版本等信息文件，

pages.json是配置页面路由、导航条、选择卡等页面类信息文件，

等等~

（2）运行项目

在HBuilderX中，选择运行->运行到小程序模拟器->微信开发者工具

就可以把刚刚创建的uni-app项目运行在微信开发者工具上了

然后HBuilderX就会自动打包项目，打开微信开发者工具，运行该项目，如下图：

然后大家就会发现出现了一个运行错误：“Cannot read property 'forceUpdate' of undefined”。

其实这个错误是因为你没有在HBuilderX中为微信小程序配置一个AppID的原因

在哪里配置呢？

在mainfest.json配置文件中，选择微信小程序配置，写入自己的AppID即可，如下图：

HBuilderX会自动编译更改的内容，然后在微信开发者工具上更新，就会发现错误消失了

今天这篇文章就写到这里啦，后续我会写如何使用Vant Weapp前端插件，文章内容有什么错误的地方，望斧正，谢谢~