1.软件安装

开始之前,开发者需先下载安装如下工具:

HBuilderX:官方IDE下载地址

下面开发工具根据需求进行安装:

2.HBuilderX 运行环境配置

点击工具栏里的工具 -> 设置->运行配置:
关于运行配置下面分别有手机/模拟器运行配置、浏览器运行配置、小程序运行配置三部分,这里对浏览器运行配置与小程序运行配置做个简单说明,至于手机/模拟器运行配置后期更新。

2.1浏览器运行配置

前提:你安装了对应的Firefox浏览器、Chrome浏览器。
-1:在Chrome浏览器安装路径:填写你Chrome浏览器的安装路径(到chrome.exe所在 文件夹即可)
-2:在Firefox浏览器安装路径:填写你Firefox浏览器的安装路径(到firefox.exe所在 文件夹即可)
配置好之后就可以点击工具栏里的运行 -> 运行到浏览器,然后选择对应的浏览器即可,如图所示:

2.2小程序运行配置

uni-app是依赖小程序开发工具的,在配置时需指定小程序开发工具的安装目录。
比如此时我的微信小程序开发工具安装路径为:

HBuilderX 中配置为:

同理,百度开发工具路径、支付宝小程序开发工具、字节跳动小程序开发工具路径的配置与微信小程序配置方式相同,参照其即可。

3. 编辑器设置

点击工具栏里的工具 -> 设置->编辑器配置:
然后在打开的编辑器设置右侧中,找到【启用px转upx提示】(uni-app项目生效),填写px转upx比例。
转换公式:设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
(1):若设计稿宽度为640px,元素 A 在设计稿上的宽度为100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117upx
(2):若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx
推荐是最好的支持,关注是最大的鼓励。亲爱的朋友,很荣幸在园子里遇到您。

uni-app开发小程序准备阶段的更多相关文章

  1. uni app以及小程序 --环境搭建以及编辑器

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...

  2. Java生鲜电商平台-优惠券功能设计与开发(小程序/APP)

    Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 说明:Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 目录 1.项目背景与需求分析 2.需求目的与功能点列表 3.业务逻辑 ...

  3. [3.0] 一个人开发一个App,小程序从0到1,删减添加

    在这个黄道吉日,咱们将要干一件,惊天地泣鬼神,妇孺皆知的大事,那就是删掉微信开发工具自动生成的源代码. 删掉pages下的index.logs目录,啥都不留: 删掉utils下的util.js,只流空 ...

  4. 甘果移动老甘:移动互联网变迁中的App和小程序

    2018 年 10 月13 日,由又拍云和知晓云联合主办的 Open Talk 丨2018 小程序开发者沙龙系列活动广州站拉开帷幕,甘果移动的 CEO 路文杰(老甘)在沙龙上做了<移动互联网变迁 ...

  5. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

  6. 用RegularJS开发小程序 — mpregular解析

    本文来自网易云社区. Mpregular 是基于 RegularJS(简称 Regular) 的小程序开发框架.开发者可以将直接用 RegularJS 开发小程序,或者将现有的 RegularJS 应 ...

  7. 微信支付之扫码、APP、小程序支付接入详解

    做电商平台的小伙伴都知道,支付服务是必不可少的一部分,今天我们开始就说说支付服务的接入及实现.目前在国内,几乎90%中小公司的支付系统都离不开微信支付和支付宝支付.那么大家要思考了,为什么微信支付和支 ...

  8. 使用mpvue开发小程序教程(三)

    在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...

  9. 使用mpvue开发小程序教程(四)

    在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来 ...

随机推荐

  1. C++中模板的特化与偏特化

    1.引言 C++中的模板分为类模板和函数模板,虽然它引进到C++标准中的时间不是很长,但是却得到了广泛的应用,这一点在STL中有着充分的体现.目前,STL在C++社区中得到了广泛的关注.应用和研究.理 ...

  2. 第一章02: 常用的DOS命令

    win+R=命令框 +输入CMD ,进入命令行.或者控制台 DOS命令如下: cd命令 1. CD.. = 返回上级目录 2. cd\ = 直接退到根目录 3.cd (地址)= 直接到指定文件 切盘符 ...

  3. RSA加密及加签

    1.对方要求我们的私钥是pkcs8格式,但是实际的公钥没有用pkcs8转换之后的私钥完成,所以是可以不是pkcs8的格式的.我们加签跟格式没有关系. 2.数据格式很重要,to_mpint而非crypt ...

  4. LeetCode 199 二叉树的右视图

    题目: 给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. 示例: 输入: [1,2,3,null,5,null,4] 输出: [1, 3, 4] 解释: 1 ...

  5. @lazy注解处理循环注入问题

    @Service public class A extends GenericBaseService { @Autowired private B b; } @Service public class ...

  6. springcloud Ribbon学习笔记一

    上篇已经介绍了如何开发eureka服务并让多个服务进行相互注册,接下来记录如何开发一个服务然后注册到eureka中并能通过ribbon成功被调用 开发一个用户服务并注册到eureka中,用户服务负责访 ...

  7. SpringBoot(三)thymeleaf+JPA+MySql

    接着上一节的 第一步:在pom文件中加入以下代码: <!--JPA--> <dependency> <groupId>org.springframework.boo ...

  8. 第四次作业——关于石墨文档(Android)客户端的案例分析

    关于石墨文档(Android)客户端的案例分析 作业地址:[https://edu.cnblogs.com/campus/nenu/2016CS/homework/2505] 第一部分调研,评测 1. ...

  9. 常见模块(三) pickle模块和json模块

    (一)json和pickle的区别 1.json是不同编程语言实现数据交换的工具,他是用来把python中的数据对象转换成字符串或者写入文件中的,再由其他语言通过json加载进来. 2.pickle是 ...

  10. 关于JVM的一些冷知识

    (1) Java加载类的一般顺序: 1.静态属性,静态方法声明,静态块. 2.动态属性,普通方法声明,构造块. 3.构造方法. 当加载一个类时,JVM会根据属性的数据类型第一时间赋默认值(一举生成的) ...