【小程序开发之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++里的对象,在里面我们封装了一些基本的数据类型也就是我们所称的属性,还有一些方法,也就是我们所称 ...
最新文章
- 独家 | 王海峰：百度大数据与人工智能（附PPT下载）
- 计算机应用基础电子毕业考试,计算机应用基础-上海电子信息职业技术学院.PDF...
- C语言试题四十五之把第1到第p个字符，平移到字符串的最后，把第p＋1到最后的字符移到字符串的前部。
- Android 父类super.onDestroy();的有关问题
- linux mysql配置文件
- 【精品软件】AE这套神级扩展终于支持2021了，AE脚本-Motion Factory 完整五套解锁版
- linux内存的优化大师,Linux性能优化大师(调整操作系统参数)
- Map集合简单应用的例子(世界杯)
- XShell连接远程centos监控控制台（tomcat）输出信息
- Python语音助手
- C语言农历天干地支,求思路。农历年月日时推天干地支
- 零基础入门数据挖掘-Task3 特征工程
- [css] 抖动效果
- 海思3519上移植Qt5.5.1
- tensorrt pb转uff问题
- c语言基础题（笔记二)
- DRF学习之短信验证的实现用户注册（十二）
- 如何使用 SAP Intelligent Robotic Process Automation 自动操作 Excel
- 比echarts还好用的数据可视化软件
- 好用的个人树洞外链系统程序源码