技术背景
前端需要做一个百度、微信双端小程序,以百度小程序效果为主,本期不做微信地图模块。
基于开发双端小程序的出发点,准备采取框架开发,分别打出百度、微信的小程序发布包。根据市场主流程度,初步选中了uni-app、mpvue、taro三个框架进行比对,最终选择uni-app。
技术选型:
最终选型结论为 uni-app 。
uni-app功能框架图
uniapp项目创建
创建方式分为命令行创建和HbuliderX代码编辑器创建两种。
命令行创建
- 全局安装vue-cli,推荐cli4.X。 命令:npm install -g @vue/cli@4
- 创建uni-app,命令:vue create -p dcloudio/uni-preset-vue my-project 「使用正式版,对应的是HbuliderX的最新版本」。
- alpha版本命令:vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
初次使用推荐hello uni-app模板,此模板api全面,是一个完整的demo。组件的处理方式模板内部都已经包含了。
HBuliderX代码编辑器创建
- 安装HBulierX软件,用于开发。
- 工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N)。选择uni-app类型,输入项目,选择模板,点击创建,即创建成功。