【小程序开发之uni-app】通识和实战准备
- 什么是uni-app
- uni-app的官方IDE
- 如何新建一个uni-app项目
- uni-app初始项目的基础配置解析
- 什么是uni_modules
- 获取uni-app ID
- 获取app ID
- 如何打开微信开发者工具的安全设置
什么是uni-app
https://uniapp.dcloud.net.cn/
uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
以达到一套代码，多端复用的效果。以此节省了单独开发多端的成本。
uni-app的官方IDE
HbuilderX
https://www.dcloud.io/hbuilderx.html
由于HbuilderX的强大支持，可以开箱即用uni-app，一键新建uni-app项目不是梦！
如何新建一个uni-app项目
第一步 ：HbuilderX——>文件——>新建——>项目
第二步：填写项目名称、路径——>选择多种模板中的一种——>选择vue版本——>点击创建
uni-app初始项目的基础配置解析
具体配置项解析
components：uni-app的组件目录。pages：内含index.vue页面。static：存放应用的静态资源，如图片（png、jpg、svg等等），注意静态资源只能存放于此。uni_modules：这里由于是采用的uni-ui的模板新建的，是uni-app的插件。App.vue:应用配置，用来配置App全局样式以及监听 应用生命周期index.html:index页面main.js:vue:初始化入口文件manifest.json:配置应用名称、appid、logo、版本打包等信息pages.json:配置页面路由、导航条、选项卡等页面类信息uni.scss:uni的全局样式
什么是uni_modules?
为什么有了node_modules，还需要再发明一个uni_modules的轮子？
这里官方文档给了我们详尽的答案：
- node_modules 不满足云端一体的需求。uniCloud的云函数、公共模块、schema和前端的各种js_sdk、组件、页面、项目，无法在node_modules模式下有效融合。
- uni_modules有付费和商业的插件，DCloud插件市场提供了版权保护。而node_modules不支持付费和版权保护。
- node_modules 是开发者友好而影响终端用户性能的模式。开发者为了省事，层层嵌套node_modules，造成数量惊人的文件数目。uni_modules不支持module嵌套，鼓励开发者优化包体积
- uni_modules鼓励开发者总是使用最新版。并在HBuilderX中提供了版本内容对比工具
- uni_modules里也支持放置node_modules，没有强行排斥。
获取uni-app ID
manifest.json中进行设置
如果有则直接添加（登录DCloud 账号重新获取即可），没有的话按照提示进行以下几步操作：
- 新建DCloud 账号
- 邮箱激活
- 新建uni-app
- IDE登录点击重新获取即可
获取App ID
登录成功后开发设置页面获取APP ID
填写到manifest.json中，并设置所需设置
如何打开微信开发者工具的安全设置
设置——>安全设置——>打开服务端口
成功显示
在HbuilderX中点击运行——>运行到小程序模拟器——>微信开发者工具
到这里今天的通识和项目实战准备已经完成了，已经可以把demo成功的运行在微信开发者工具上。
这就是本期的全部，我们下期继续！
本期重点回顾
- 什么是uni-app
- uni-app的官方IDE
- 如何新建一个uni-app项目
- uni-app初始项目的基础配置解析
- 什么是uni_modules
- 获取uni-app ID
- 获取app ID
- 如何打开微信开发者工具的安全设置
【小程序开发之uni-app】通识和实战准备相关推荐
- 微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现 一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
- 微信小程序开发之SVG的使用
因为工作的原因,最近开始接触并且了解微信小程序.太久没有写或者看过前端相关的代码,加上小程序本身的bug也比较多,中间发现坑还是不少,后面逐渐整理总结一下.这一篇先总结一下svg在小程序中的使用. S ...
- 微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事 微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法 什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
- H5前端开发以及小程序开发之路
好久没写博客了,今天心血来潮.总结下.近一年的前端开发之路. 首先,用了ionic+cordova技术框架开发纯粹的混合APP(得有angular的基础知识),一个商城项目,也用了vue,编写单页面, ...
- 微信小程序开发之从“跳伞”到“吃鸡”
写在前边 微信小程序随着官方开放越多越多的接口,也是变的越来越火了,越来越多的企业已经开始布局小程序生态.所以,对于我们开发者来说,掌握小程序开发显得分外重要.如果点亮了该技能,那么离升职加薪赢取白富 ...
- 小程序开发之 wx.getUserInfo获取用户信息方案介绍
原文链接:https://www.cnblogs.com/kenshinobiy/p/9118024.html ========================================= 背景 ...
- 微信小程序开发之mpVue
1 mpVue是什么 1.1 简介 美团工程师推出的基于Vue.js封装的用于开发小程序的框架 融合了原生小程序和Vue.js的特点 可完全组件化开发 1.2 特点 组件化开发 完成的Vue.js开发 ...
- 微信小程序开发之webview组件内网页实现微信原生支付
前言.背景 本人目前的工作岗位是安卓工程师,在这之前对于前端和后台的知识基本是白纸,只是在日常的工作项目中有需要和小伙伴进行对接的时候接触了那么一丢丢,对于前端和后台的一些专业描述和理解有不当之处还请 ...
- 微信小程序开发之.js文件
1.注册小程序 App()函数用于注册一个小程序,参数为一个Object(可以把它理解成为一个类似于C++里的对象,在里面我们封装了一些基本的数据类型也就是我们所称的属性,还有一些方法,也就是我们所称 ...
最新文章
- 瓶框（bottle）架学习之模版使用
- 回归架构本真：从规划、思维到设计，构建坚不可摧的架构根基
- freeRtos学习笔记 (8) 任务通知
- foobar2000 ios版怎么添加音乐_抖音怎么设置说完话后再放音乐 视频先配音后半段添加背景音乐...
- SpringBoot系列: Eclipse+Maven环境准备
- Qlikview Session Recovery
- laravel 下载图片跨域问题
- 郝斌PHP视频教程,郝斌数据结构自学视频_IT教程网
- 关于软件设计使用中一些的原则简述
- [转载] iOS直播相关，感觉有点用
- 多传感器融合综述---FOV与BEV
- YonLinker连接集成平台，助力企业实现社会化互联
- Git 备份 Hexo 博客
- Docker 从入门到精通
- unity3d培训_001
- Intel-4004微处理器（MCS-4微机）
- 二氧化碳浓度数据集整理
- 正运动技术荣膺“CMCD 2020年度运动控制领域最具成长品牌”等三项大奖
- hutool 合并单元格
- Java面试宝典简洁篇（持续更新中，从入门到放弃）