微信开发者工具的模拟器准不准_微信开发者工具 iphone6模拟器准吗 - CSDN
  • 问题:有时候,在模拟器上UI效果显示正常,但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性 box-sizing: border-box;子组件加起来的宽度超过了父组件的宽度,从而导致显示的效果是:父...

    问题:有时候,在模拟器上UI效果显示正常,但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性

     box-sizing: border-box;子组件加起来的宽度超过了父组件的宽度,从而导致显示的效果是:父组件还是正常显示在原来设定的位置

    上,而子组件则往下移动了,导致UI变乱。按照常理,当子组件的宽度大于父组件的宽度,会把父容器这个盒子给撑大,但是在微信小程序中,父容器还是原来设定的那么大,显示在原来位置,子组件则是往下移动,导致UI显示不正常。

    解决方法:父组件要一起使用属性box-sizing: border-box;和overflow:hidden;注意子组件和父组件的宽度问题

    .wxml代码如下:

    <view class="head">
        <button type="text" class="headBtn" >加密</button>
        <button class="headBtn" >解密</button>
    </view>
    <view class="passAndEncrypt">
          <input class="encryptedPass" />
          <button class="encryptedTextBtn" >粘贴密文</button>   
    </view>
    <textarea />

    .wxss代码如下:

    .head,.passAndEncrypt,textarea{
      box-sizing: border-box;
      display: block;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      width:89.375%;
      min-width: 310px;
    }
    .head{
      padding-top:20px;
    }
    .passAndEncrypt{
      height:42px;
    }
    .headBtn{
      display: inline-block;
      width:50%;  
      text-align:center;
      margin:0px;
      padding:0px;
      background-color:white;
      border-radius: 0px;
      border-color: white;
      color: gray;
      font-size:14px; 
    }
    
    
    .encryptedPass{
      float: left;
      border:1px solid rgb(220,220,220);
      border-radius: 3px;
      padding-left: 4px;
      margin:0px;
      height: 40px; 
      background-color:white;
      width:50%; 
      /* text-overflow:clip; */
      overflow:hidden;
      white-space:nowrap;
    }
    
    .encryptedTextBtn{
      font-size: 14px;
      float: right;
      margin:0px;
      width:50%;
      background-color:#CC3333;
      color:white;
      height: 40px; 
      /* border-radius:0px; */
      overflow:hidden; 
    }
    
    .textarea{
      border:1px solid rgb(220,220,220);
      padding:6px;
      line-height:20px;
      margin-top:20px;
      height:150px;
      border-radius:3px;
      background-color:white;
    }
    


    从上面可以看出来:解密密码和点击解密整体下移了


    原因:是因为解密密码和点击解密两个加起来的宽度超过了父元素的宽度,如上面红色字体所示,所以修改子组件的宽度并为父组件添加属性overflow,如下面所示:

    .head,.passAndEncrypt,textarea{
      box-sizing: border-box;
      display: block;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      width:89.375%;
      min-width: 310px;
      overflow:hidden;
    }
    encryptedPass{
      float: left;
      border:1px solid rgb(220,220,220);
      border-radius: 3px;
      padding-left: 4px;
      margin:0px;
      height: 40px; 
      background-color:white;
      width:47%; 
      /* text-overflow:clip; */
      overflow:hidden;
      white-space:nowrap;
    }
    
    .encryptedTextBtn{
      font-size: 14px;
      float: right;
      margin:0px;
      width:47%;
      background-color:#CC3333;
      color:white;
      height: 40px; 
      /* border-radius:0px; */
      overflow:hidden; 
    }


    显示效果:


    总结:在微信小程序中,模拟机和真机上效果不一样,或者UI布局混乱的原因之一是子组件的宽度(高度)超过了父组件的宽度(高度),因此在布局中一定要注意子组件和父组件的宽度问题,否则很容易导致bug;

    除此之外,属性overflow:hidden一般配合box-sizing:border-box使用



    展开全文
  • 微信开发者工具模拟器input点击偏移问题解决方法: 原因: 由于win10系统显示设置了 缩放布局125% 将其改成100%即可 1.在桌面右击鼠标:点击显示设置 2.更改显示缩放布局: 不用谢我,因为事后你会改回来的! 好...

    微信开发者工具模拟器input点击偏移问题解决方法:

    原因:

    由于win10系统显示设置了 缩放布局125% 将其改成100%即可

    1.在桌面右击鼠标:点击显示设置

    在这里插入图片描述

    2.更改显示缩放布局:

    在这里插入图片描述

    不用谢我,因为事后你会改回来的!

    好了拜~

    展开全文
  • 微信开发者工具模拟时能正常显示 真机调试也能正常显示 但预览时无法显示(在预览时打开调试功能就能正常显示) 上图是我无法显示的情况。 而下图是正常显示的情况。 解决方法: 由于获取的数据的url写的是该插件...

    问题描述:

    使用uni-app开发微信小程序界面
    仿照uCharts插件给的示例绘制图表
    微信开发者工具模拟时能正常显示
    真机调试也能正常显示
    但预览时无法显示(在预览时打开调试功能就能正常显示)
    在这里插入图片描述

    上图是我无法显示的情况。
    而下图是正常显示的情况。
    在这里插入图片描述

    解决方法:

    1. 由于获取的数据的url写的是该插件提供的案例中的网址,数据以json的形式保存在这个网站上,所以预览时访问不到。(但是不清楚为什么模拟器和真机调试时可以)

       下面是错误代码

    getServerData() {
    	uni.request({
    		url: 'https://www.ucharts.cn/data.json',
    		data:{
    		},
    		success: function(res) {
    			console.log(res.data.data)
    			]}]};
    		},
    		fail: () => {
    			_self.tips="网络错误,小程序端请检查合法域名";
    		},
    	});
    }
    
    1. 要解决访问不到的问题,所以,决定直接把该网站上的数据复制下来保存到本地,直接进行本地访问。操作方法如下:
      1. 新建一个.js的文件,然后把网站上的内容复制下来。格式如下:
      var json = {
      (复制下来的内容)
      }
      module.exports = {
      	data: json
      }
      
      1. 在页面中导入js文件并调用(修改上面的错误代码)。代码如下:
      var jsonData = require('@/static/json/1.js');
      
      getServerData() {
      	var res = jsonData.data;
      	(以下省略,即去掉uni.request())
      }
      
    2. 重新运行下,就能成功显示图表了!

    最后,要是遇到的情况和我不一样的话,或者还是解决不了无法显示的情况的话,建议去看看官方文档。这里附个链接。
    uCharts官方API

    最后的最后,如本文有错误的地方,欢迎指正!!

    展开全文
  • 介绍一下微信开发者工具和微信小程序的目录结构。

    本章内容

    1. 微信开发者工具介绍
    2. 小程序结构目录介绍

    微信开发者工具介绍

    这一章,我将介绍微信开发者工具的一些功能与之后我们将如何使用该工具进行开发。本人只选择一些我觉得重要的内容进行讲解,详细内容可以去官方微信开发者工具文档进行查阅。

    微信开发者工具分区

    模拟器

    顾名思义,这个部分的功能就是在电脑上模拟小程序在手机上的预览情况,有过安卓开发经验的同学应该十分清楚了。我们可以在模拟器上预览和操作写好的小程序,它是我们后续开发经常用到的部分,下面将详细介绍。

    更改屏幕尺寸及显示比例

    在模拟器区域的左上角可以更改模拟器屏幕的尺寸以及显示比例。

    更改模拟器屏幕尺寸及显示比例
    它里面有一些内置好的机型的屏幕尺寸可供选择,当然也可以自定义屏幕尺寸来调试小程序在不同尺寸机型上的适配问题。

    此处可以自定义屏幕尺寸

    如果觉得当前模拟器显示比例不合适,还可以更改模拟器的显示比例。

    不同的显示比例

    模拟操作

    在模拟器上可以进行一系列的模拟手机环境的操作。

    模拟操作
    模拟操作里有选择网络情况、点击Home键、返回、销毁页面及深色模式等操作,可以在不同情况下进行调试。

    模拟操作WIFI

    这里的网络情况有WIFI、2G信号、3G信号、4G信号和Offline(断网)可供选择,但是这个网络调试有时候好用有时候不准,对我来说还是更喜欢真机调试,这样更能反映情况。
    另外,此处的销毁并不清除本机缓存

    当点击模拟操作里的Home时会弹出以下窗口:

    点击Home

    至于什么是场景值,在讲到工具栏的添加编译模式时会介绍。

    终止

    终止

    按下终止之后就会使模拟器停止模拟,在你电脑比较卡的时候可以使用。想重新启用模拟器,点击工具栏上的编译按钮即可。

    点击终止

    静音

    很简单,就是将模拟器静音,当你的小程序加入了一些背景音乐,而你在编写程序的过程中不想听的话可以将其静音。

    静音

    分离窗口

    模拟器可以单独弹出成为一个独立窗口。

    分离窗口
    在点击分离窗口之后,模拟器就弹射起飞了!

    点击分离窗口

    查看编译条件

    在模拟器下方可以查看当前页面的一些编译条件。

    此处可以查看当前页面的一些编译条件
    此处的编译条件包括:页面路径、页面参数和场景值,这三个数值我们在以后还会经常遇到,以后再解释,总之,我们只要知道可以在这里查看这些数值就行了。

    预览

    此处的预览和工具栏的预览一样的,当点击此处预览时,最终也是在工具栏的预览那里显示预览的二维码,具体的在讲到工具栏的预览时一并讲解。
    预览

    生成骨架屏

    何为骨架屏,骨架屏就是在页面尚未加载之前先给用户展示出页面的大致结构,直到页面请求数据后渲染页面。在整个过程中用户在主观上会觉得很流畅,骨架屏可以降低用户的等待期间的焦躁情绪。具体可以参考这篇文章:
    vue骨架屏介绍
    在点击生成骨架屏之后,微信开发者工具会在当前页面路径下自动生成两个骨架屏文件(一个是wxml、一个是wxss)。

    生成骨架屏

    现阶段我们没有必要使用该功能,等到把一个项目大体的UI、业务逻辑处理写完,把各种功能都能够实现的时候,再回头做UI优化也不迟,这里就先了解一下。

    资源管理器

    没什么好说的,就是可以查看当前项目的文件以及目录结构,可以进行的操作也很简单,总共也就那几个按钮。值得一提的是,这里的资源管理器会根据不同文件名或者后缀名而赋予文件不同的图标,有时候可以通过图标来判断自己的文件命名有没有问题。

    资源管理器

    编辑区

    顾名思义,就是敲代码的地方,但是我一般不在微信开发者工具里敲代码,因为其本身的代码自动补全并不如其他工具如WebStorm、vscode等强大,因此在实际开发中我很少会使用到该区域。但我还是会说一说它的一些相关功能。

    支持列编辑

    跟其他很多编辑器一样,微信开发者工具也支持列编辑,使用方法是:按住鼠标中键拖动鼠标然后选择要同时编辑的区域就可以了,效果如下图。

    列编辑

    支持列块编辑

    同时,微信开发者工具也支持列块编辑,使用方法是:按住Alt键,接着按住鼠标左键不放,拖动鼠标选定要同时编辑的区域,效果如下图。

    列块编辑

    查看官方文档

    假如把你的鼠标停留在wxml文件中的标签上时,会弹出一个“Read Document”的框框,这时可以点击它,它会直接打开浏览器并跳转到官方文档相应的标签处,对于开发来说非常方便,很人性化,像我们这种记忆力不好的人,记不住那么多东西,常看文档是最好的提高能力的方法!

    查看官方文档

    分屏

    跟其他很多编辑器一样,微信开发者工具的编辑区也可以分屏,点击编辑区右上角的向右拆分编辑器即可,一般我会用分屏一边放wxml文件,一边放wxss文件,这样写样式方便一点,不用来回切换,效果如下图。

    分屏

    控制台

    大家可能会发现微信开发者工具里的控制台和Chrome浏览器的控制台很神似,这是因为微信开发者工具使用了Chrome的一些内核。关于怎么使用,在后续开发中大家就会逐渐了解到,因此,在这里我就不多讲,只需要了解这里是可以让我们进行调试的一个地方就行了,如果程序编译或执行有错误,会“爆”红,并指出错误的位置及原因

    程序报错

    工具栏

    工具栏上面有很多我们开发、调试、发布要用到的一些功能,以后会经常用到。

    个人中心

    点击左上角的用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息。

    在这里插入图片描述

    主界面模块的显示与隐藏

    用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。绿色表示当前模块正在显示,灰色表示当前模块已被隐藏。

    模拟器已被隐藏

    更改开发模式

    还记得在新建项目的时候选择的开发模式吗?如果在新建项目之后想更改开发模式的话也是可以的。

    更改开发模式

    编译与预览

    工具栏上有编译和预览的功能,我们在以后将十分频繁地用到这两个功能。

    编译

    点击编译按钮后,微信开发者工具会编译你的代码,并在模拟器生成小程序的模拟预览,如果你的开发者工具默认选中了“保存时自动编译小程序”的选项后,按CTRL+S后即可保存你的代码并自动编译,该选项在菜单栏的“设置”>>“编辑器设置”里。
    当然如果没有勾选这个选项,按CTRL+S后只是保存你的文件而已,并不会进行编译,编译有他自己的快捷键:CTRL+B

    编译条件

    大家也许注意到了,我们编译的时候选的是普通编译,那么什么是普通编译呢?
    可以简单地理解为:普通编译之后在模拟器出现的会是小程序的首页。假如你的小程序里有很多个页面,那么微信开发者工具怎么知道你哪个是首页呢?
    在app.json文件里的pages数组中的第一个元素代表的就是首页,如下图。以后我们讲小程序的配置文件的时候还会详细讲

    首页在app.json里
    那假如我就想对一个不是首页的页面单独进行调试,那我是不是得从首页开始一步一步跳转到我想要调试的那个页面?那样也太麻烦了吧!

    有两种解决的办法:

    1. 在app.json文件中把想调试的页面,放到第一个,然后进行普通编译(不推荐):

      我们发现pages数组里有两个属性,我们把logs那个页面跟第一个index页面换一下位置,编译后发现:

    logs页面

    我们打开了logs启动日志页面,很明显就不是我们一开始看见的那个页面,所以这个方法是行得通的。但是每要调试一个页面就要改一次文件就会很麻烦,不推荐使用

    1. 添加编译模式(推荐):
      在“普通编译”处的下拉菜单中可以选择添加编译条件

    添加编译模式

    模式名称: 可以自定义,中英文都可以,比如可以写“支付页面”、“购物车页面”等。
    启动页面: 这里填的是要启动页面的页面路径,该路径要在pages数组中存在。
    启动参数: 这里可以给页面的一些参数赋值,在启动该页面后这些参数会被初始化为你在这填写的值。
    进入场景: 这里选择的是场景值,也就是在模拟器介绍时提到过的场景值,表示的是从哪里进入该小程序,是一种模拟。比如:场景值为1011模拟的是该小程序是扫描二维码后打开的。
    我们选择相应的编译条件编译之后,一开始出现的页面就会是我们填写的启动页面,不用更改app.json文件,十分方便,推荐这种方式。

    预览

    预览有两种方式预览,一种是扫描二维码预览,还有一种是自动预览

    • 扫描二维码预览: 可以用自己的微信扫码然后就可以在手机上预览小程序,当然也可以把二维码分享给别人,让别人预览,前提是那个“别人”得是你的项目成员点击此处查看如何添加项目成员。
    • 自动预览: 点击自动预览之后你的手机就会自动打开并进入当前小程序预览。

    真机调试

    真机调试也有两种,一种是“扫描二维码真机调试”,还有一种是“自动真机调试”。
    进入真机调试后会出现一个新的窗口同时你的手机也会进入当前小程序的预览:

    真机调试

    同样地,如果想用别人的手机扫码进行真机调试,那他/她得是项目成员才行。

    切后台

    该功能可以模拟手机上把小程序切换到后台,然后模拟器将弹出场景值的选择界面,此时选择相应的场景值便可以模拟出小程序从相应的场景跳转到小程序

    切后台

    清缓存

    有时候我们调试的时候需要调试看数据有没有成功添加进本地数据缓存,这时候就需要将之前的缓存都清理掉,再来编译测试,当然我们还可以选择清除其他的一些缓存。

    清缓存

    基本信息、本地设置、项目配置

    点击右上角的“详情”即可查看这些信息。
    要注意的一点是,在第一章的时候也讲过,创建完项目之后是可以修改AppID的,假如之前新建项目选用的是测试号,后续开发需要用到自己的AppID时可以在这里更改:

    修改AppID

    另外,如果是测试号的话是没法使用微信开发者工具的“上传”功能的,需要使用AppID才会出现“上传”按钮,点击它后可以把你的项目上传到微信小程序后台(点击“版本管理”即可查看):

    上传

    至于其他的一些设置需要用到的时候再来讲解。

    那么微信开发者工具也介绍到这里,下面是小程序目录结构的介绍。

    小程序结构目录介绍

    ⼩程序框架提供了⾃⼰的视图层描述语⾔ WXMLWXSS ,以及 JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。本人喜欢对比学习,对比学习是很有效率的一种学习方法,我们首先可以来比较一下小程序文件结构传统Web有什么不同。

    小程序文件结构与传统Web对比

    文件结构 传统Web 微信小程序
    结构 HTML WXML
    样式 CSS WXSS
    逻辑 JavaScript JavaScript
    配置 JSON

    通过以上对⽐得出,传统web是三层结构。⽽微信⼩程序是四层结构,多了⼀层配置.json

    基本的项目目录

    这下我们再来看小程序的项目目录就很清晰了,在这我偷懒,把黑马程序员的图拿来用一下:
    小程序目录结构

    一个完整的页面结构包括了四个文件:WXML(结构文件)、WXSS(样式文件)、Js(逻辑处理文件)以及Json(配置文件)。

    一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下表所示:

    文件 是否必需 作用
    app.js 小程序逻辑
    app.json 小程序公共配置
    app.wxss 小程序公共样式

    一个小程序页面由四个文件组成,分别是:

    文件类型 是否必需 作用
    js 页面逻辑
    wxml 页面结构
    wxss 页面样式
    json 页面配置

    根据官方文档说明:

    为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

    其实这一点不用太过在意,无论是在微信开发者工具或者是其他开发工具(带有微信小程序开发插件的)都支持直接新建Page,这样创建出来的页面在页面文件夹下会自动生成那四个基本文件。

    新建Page

    到这里本章内容也就结束了,下一章正式开始小程序的学习~~~

    展开全文
  • 为了帮助开发者们进一步“减负”,腾讯地图的插件添加了路线规划的能力,主要解决“向用户展示从A到B路线”的问题。使用插件的正确姿势究竟是什么呢?今天我们给大家介绍——腾讯地图插件的能力。
  • 原文地址:http://geek.csdn.net/news/detail/104430福特说,你问用户要什么交通工具,用户会说他想要一匹更快的马,没人会认为汽车是未来。 所有让人爽的东西,都是发展方向。而一旦一个有影响力的巨头去做,就成...
  • 由于选择了最不畅销的蓝色运动版,很幸运成为了第一批拿到苹果表的用户。之前看到六月发货差点想退掉。 关于苹果表卡的问题网上已经有很多消息,这是购买前需要明白...毕竟自己写的应用在模拟器上调试和手机上调试感...
  • 下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar ...
  • 一、安卓手机或模拟器操作步骤 环境搭建 方法1. Windows 免添加配置 adb 环境变量方式 注意:如果你不想在 windows 下面配置 adb,也可以使用不需要配置的 adb 环境变量方式,但是需要在Tool/adb文件下操作...
  • 点击“开发者技术前线”,选择“星标
  • 弱网测试

    2018-02-23 14:00:34
    最近项目需要测试弱网下的热...工具 Network Emulator for Windows Toolkit(NEWT) Augmented Traffic Control(ATC) WANem fiddler charles NEWT 安装 下载地址:http://blog.mrpol.nl/2010/01/14/netw...
  • 相信大家一开始做安卓开发就知道apk需要签名,但是有多少人真的知道Android的签名是什么呢? 今天我们就一起来聊聊...Android的证书通常是自签名的,也就是开发者可以自己创建,不需要向CA机构申请。系统认为某...
  • author:bestswifteraddress:http://www.jianshu.com/p/e6571e0cd7d4remark:本文系原作者于[技术鸟]微信公众号投稿授权首发...
  • 基本概念 地图和定位功能基于两个框架:Map Kit:用于地图展示 Core Location:用于...SoLoMo: Social Local Mobil (索罗门) 社交本地移动(微信陌陌的定位) 经纬度结构体:CLLocationCoordinate2D - CLLocationCoor
  • 转载自:... ...Cocos开发者平台 Cocos引擎中文官网 H5轻游戏平台 退出3471815256 iOS 8 Swift App Store Apple Watch Metal Cocos引擎 手游
  • HBuilder X - Release Notes ====================================== 2.6.15.20200421 新增 【重要】内置浏览器运行时,将日志直接输出到HBuilderX控制台 新增 内置web服务器 支持自定义端口 (菜单【设置】【运行...
  • 《iOS APP 性能检测》

    2017-10-16 11:06:37
    colawyeeqiu | 导语 最近组里在做性能优化,既然要优化,就首先要有指标来描述性能水平,并且可以检测到这些指标,通过指标 值的变化来看优化效果,于是笔者调研了iOS APP性能检测的一些方法,在此总结一下。...
  • 2018 iOS 如何自我提高

    2018-03-18 08:11:36
    如果从 13 年移动客户端大火开始算起,至今已经有五个年头了。现在移动端的形势也不需要太多的废话来描述,一句话总结就是:“浪潮退去,谁在裸泳一看就清楚。”我希望借助这篇文章来聊聊在我心目中,移动互联网下一...
1 2
收藏数 27
精华内容 10
关键字:

微信开发者工具的模拟器准不准