05-小程序(优购商城项目介绍,HBuilder和HBuilderX,uni-app介绍) 笔记

07- 优购商城项目介绍

商城的业务类型很ok
1. 商城类的小程序是最多的
优购商城的基本逻辑
1. 分类->按关键字搜索找到商品->商品详情->加入购物车->结算
2. 可以参考京东App, 或者小米ite
项目支持多端
1. uniapp框架本身就用vue写的, 编译成代码兼容多端, iOS, Android, H5, 微信小程序
接口
1. 接口文档

08-原生小程序与第三方小程序框架们原生小程序是什么？有原生HTML这种说法吗？

原生来自于英文raw
原生是指官方语法
原生HTML没有这种说法

原生小程序的痛点：

语法: 类vue另类
开发工具
1. 微信开发者工具坑挺多
引入第三方组件
1. 比较复杂
npm支持
1. 也不友好

几个常见的第三方小程序框架对比第三方小程序框架: 用我们熟悉的前端技术来写小程序

1. wepy 1. 类vue语法 2. 支持微信小程序 2. mpvue 1. 用vue来写所有小程序 2. 支持各种小程序 3. 坑还是挺多 4. 最近三年都有人维护 3. uniapp 1. uniapp,用vue来写所有前端应用,包括小程序,H5, app 2. 纯vue语法 3. 坑是比较少, 社区比较活跃 4. taro 1. 京东出品 2. react来写小程序

扩展：

什么是跨端开发框架？
1. 一套代码支持多个前端应用
小程序第三方框架对比：
1. 传送门

09-Dcould(数字天堂)的产品传送门

HBuilder X
1. 开发工具
2. IBM eclipse和插件的组合, 不是国产
uni-app
1. vue来写所有前端应用的框架
h5+
1. js原有api+ js调用摄像头, 电话等等
MUI
1. H5+的UI库

文档写得通俗易懂, 多看

10-认识开发工具HBuilder和HBuilderX 传送门
安装：

下载哪个版本？
1. 下载正式版本里面App版本
解压安装
1. 建议在C盘新建一个目录 myApp
2. 把zip放到myApp, 然后解压, 等待解压完成
3. 直接打开HBuilderX.exe
需要注册？
1. 最好注册账号登录

11-熟悉HBuilder

设置快捷键
切换主题
支持vue语法
新建项目
1. 文件->新建->项目
视图
1. 如果左侧项目管理器不见, ctrl+B或者双击打开的文件
关闭项目
1. 右键->关闭项目
设置
1. 工具->设置
2. 请设置制表符长度为2, 保证缩进时是2个空格

12-uni-app介绍传送门
概念使用Vue.js开发所有前端应用框架
新建项目

05-小程序(优购商城项目介绍,HBuilder和HBuilderX,uni-app介绍)

文章图片

13-运行

浏览器运行
1. 运行->运行到内置浏览器
2. 一定打开某一个页面后, 浏览器才可以显示页面
3. 内置浏览器第一次运行时,需要装插件
真机调试
1. 保证手机可以连上电脑
2. 选中项目->运行->运行手机或模拟器, 选中你的手机
3. 第一次需要在手机上安装基座
打包APK
1. 发行->原生App云打包,在弹出确认框的配置
  
  文章图片
  1. 下载安装包
    1. 发行->原生App-查看云打包状态
运行微信开发者工具
1. 运行->运行到小程序模拟器-> 微信开发者工具
2. 两个配置
  1. 在Hbuilder配置微信开发者工具位置
  2. 微信开发者工具,打开服务端口