【重点突破】—— UniApp 微信小程序开发官网学习One

一、初步认识

• uni-app官网：https://uniapp.dcloud.io/component/README

• HBuilderX官方IDE下载地址： http://www.dcloud.io/hbuilderx.html

• 选择版本： 下载App开发版，可开箱即用；

• 如使用cli方式创建项目，可直接下载标准版

• 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app，输入工程名

• 运行uni-app: 快捷键 ctrl+r 选择运行方式

• 显示项目目录： 视图 -> 显示文档结构图

• 发布为微信小程序：

1. 申请微信小程序AppID
2. 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信"，输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码
3. 在微信开小程序发者工具中，导入生成的微信小程序项目
4. 测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可

• 不建议使用vue-cli创建项目：必须使用vue-cli3.X，vue-cli更新快于HBuilderX

  npm install -g @vue/cli
  
  vue create -p dcloudio/uni-preset-vue my-project
  
  //运行并发布微信小程序版uni-app
  npm run dev:mp-weixin 
  npm run build:mp-weixin

• 学习uni-app路径： 

1. uni-app首页介绍 https://uniapp.dcloud.io/quickstart
2. 快速上手 https://uniapp.dcloud.io/quickstart
3. 3节官方教程 https://ke.qq.com/course/343370?taid=2788142445051210
4. 白话uni-app http://ask.dcloud.net.cn/article/35657
5. 培训实战视频 https://ke.qq.com/course/379043?from=800006421
6. 不太需要专门去学习小程序开发，只看uni-app官网即可
7. 注意vuejs可以在html中使用，而uni-app里没有HTML，直接就是vue文件。
8. 另外vue的路由、npm可以不学
9. uni-app官方教程学习手记 https://segmentfault.com/a/1190000017020710

• 跨端开发注意每个端，有每个端的管理规则

1. H5端的浏览器有跨域限制；
2. 微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；

• uni-app基于Vue 2.0实现，虽然使用vue，但在app和小程序里，不是spa，而是mpa

 

二、框架简介

• 开发规范：

1. 页面文件遵循 Vue 单文件组件 (SFC) 规范。每个 .vue 文件包含三种类型的顶级语言块