微信开发者工具模糊_微信web开发者工具 模糊 - CSDN
  • 微信开发者工具字体模糊微信小程序开发字体模糊 微信小程序开发字体模糊 最近学习小城许开发发现字体总是模糊,找了好多解决方案都没有解决,最后发现可能是gpu加速问题,采用 cmd命令启动程序就ok了 微信web开发者...

    微信开发者工具字体模糊

    微信小程序开发字体模糊

    最近学习小城许开发发现字体总是模糊,找了好多解决方案都没有解决,最后发现可能是gpu加速问题,采用 cmd命令启动程序就ok了 微信web开发者工具.exe --disable-gpu

    展开全文
  • 这次的微信web开发者工具的更新主要是对开发工具的功能增强和bug修复,增加修改了一些最近一直频繁在开发者中被提出的问题,比如请求的地址不是合法的域名地址之类的问题。 具体看下面吧: 开发者工具基础功能 1....

    这次的微信web开发者工具的更新主要是对开发工具的功能增强和bug修复,增加修改了一些最近一直频繁在开发者中被提出的问题,比如请求的地址不是合法的域名地址之类的问题。

    具体看下面吧:

    开发者工具基础功能

    1.[增加] 上传代码时样式自动补全选项,默认开启,开发者可以主动关闭 详情

    Paste_Image.png

    2.[增加] 开发环境不校验请求安全域名以及 TLS 版本选项,默认关闭,开发者可以主动开启 详情

    Paste_Image.png

    3.[增加] Page 页面脚本错误的提示信息

    4.[增加] 同客户的保持一致,校验 wx.request、wx.downloadFile、wx.uploadFile的 TLS 版本

    5.[增加] 工具窗口位置以及大小的自动保存功能

    6.[增加] 显示模拟器中的错误信息的功能

    7.[增加] wxml panel 双击标签名展开的功能

    8.[增加] 打开本地开发目录的功能

    Paste_Image.png

    9.[增加] 当前 AppId 的网络配置信息表

    10.[修复] 同客户端保持一致,移除 Promise,开发者需要自行引入兼容库

    这个是个新坑,需要注意,原来相当于自带Promise的,现在不带了。需要自己引入第三方Promise实现,比如bluebird.js等。
    
    Paste_Image.png

    11.[修复] 某些情况下,事件被发布多次的 bug

    12.[修复] 在 devtools 中使用 Ctrl + R 或者 F5 导致模拟器出现错误的问题

    13.[修复] wxml panel 在 mac 中白屏的问题

    14.[修复] wxml panel 在 inspect 模式下卡顿的问题

    15.[修复] wxml panel 在某些情况下假死的问题

    16.[修复] wxml panel sytle 面板文字重叠的问题

    17.[修复] wxml panel 无法取消多个样式规则的问题

    18.[修复] wx.request 设置content-type错误的问题

    19.[修复] wx.downloadFile、wx.uploadFile未校验可信域名的问题

    20.[修复] git 切换分支或者文件大量改变时候模拟器白屏的问题

    21.[修复] wxml 文件不存在的时候没有报错信息的问题

    编辑模块

    1.[增加] wxml、wxss 文件格式化代码的功能

    2.[增加] 使用 Ctrl + Shift + f 搜索代码的功能

    3.[增加] 文件树右键功能

    4.[增加] 关闭右侧文件的功能

    5.[增加] 使用 Ctrl + p 文件跳转支持模糊搜索

    6.[增加] wxml 代码自动补全的和文档显示的功能 详情

    7.[增加] gif 类型文件的显示功能

    8.[增加] 在硬盘上打开文件的功能

    9.[增加] 保存 app.json 后,自动创建对应 page.js 和 page.wxml 文件的功能

    这个功能挺方便的,代码生成器。
    

    在app.json里新加一个page配置:

    Paste_Image.png

    保存后,就自动生成了该page对应的代码框架:

    Paste_Image.png

    10.[修复] wxml 自动补全错误的问题

    11.[修复] 文件过多时候,在 tabbar 上无法点击的问题

    12.[修复] 修改目录名字可能失败的问题

    展开全文
  • 首先第一步 2个选择 1微信获取头像 2上传头像 1比较简单 直接用button组件获取一下头像 就好,此处有坑默认获取的头像为 132* 132的 比较小 在新的画布上画的 话 要么画的比较小 要么稍微 扩大点 头像就显示 模糊了 ...


    个人感觉真机调试 和开发者工具 在处理图片上 好多人说的 不一致的问题 就是主要是 在上传文件的方式的问题 此处(最后一步在画布上进行绘画的时候)只要判断了图片的来源 并且根据不同的来源去 drawImage  那么真机调试 和开发者工具 显示的结果都是一致的,经过本人多次测试,没有出现不一致的情况

    首先第一步 2个选择 1微信获取头像 2上传头像       1比较简单 直接用button组件获取一下头像 就好,此处有坑



    默认获取的头像为 132* 132的  比较小 在新的画布上画的 话 要么画的比较小 要么稍微 扩大点 头像就显示 模糊了 

    官方文档 说的是  0 代表132* 132   经过测试  尺寸 0>132>96>64>46 此处巨坑!@!!  一开始只看了文档 没测试0 !! 连续搞了一天才发现 天坑!!

    2 采用的是 一个组件 we-copper 


    使用该组件 可以 划定 图片的 选定范围 嗯比较简单 不做详细描述 



    下一步  选择口号 简单的参数传递 不做详细描述



    下一步 生成图片 以及下载 此处坑多 容我细细道来

    首先判断 你的头像是 本地上传的 还是 直接使用的微信头像 ,

    此处提供简单的判断方法 直接截取 传过来的微信头像的 前5个字符 如果是 https 那么就是 下列 2情况 否则是1情况

    1如果是本地上传的 那么 可以直接在画布上 就是drawImage 上使用path

    2 如果是微信头像  那么首先你要 用 wx.downfile 下载这个文件到本地在操作 ;只要是https(微信不允许请求http此处忽略) 开头的 都需要下载 下载了    在画布上 drawImage  使用下载后成功返回的 res.tempFilePath 就可实现


    其余下载啥的 基本简单 没啥问题!!


     


    展开全文
  • 相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(三)入门之创建打卡活动前言上篇文章简单的介绍了微信开发者工具和小程序的框架,后续文章将会对日历打卡各个模块的开发思路以及遇到...

    相关文章

    微信小程序开发(一)微信开发者工具以及小程序框架介绍

    微信小程序开发(三)入门之创建打卡活动

    微信小程序开发(四)入门之打卡功能开发


    前言

    上篇文章简单的介绍了微信开发者工具和小程序的框架,后续文章将会对日历打卡各个模块的开发思路以及遇到的问题和大家做个分享,本篇将对首页的开发做个介绍。

    需求

    发现页面需求图如下

        























    json文件配置

    上篇文章在介绍小程序的框架时,每个页面都会有json文件,在json文件中可以配置当前页面的窗口信息。下面来介绍下常用的一些配置。

    {
        "enablePullDownRefresh": true,                         //是否开启下拉刷新 对应js文件中
        "navigationBarBackgroundColor": "#7885e8",             //导航栏背景颜色 ,16进制 
        "navigationBarTitleText": "发现",                       //导航栏标题内容
        "navigationBarTextStyle": "white",                     //导航栏标题字体颜色
        "backgroundColor": "#7885e8"                           //下拉后窗口拓展部分背景色,一般设置导航栏(默认白色)
        "disableScroll":false                                  //设置为true,则不能上下滚动,只在页面的page.json生效 
        "onReachBottonDistance":100                            //触发上拉加载方法时距离底部距离(不设置为0)
    }
    
    

    ②swiper控件 - 轮播图实现

    相对于安卓开发来说,小程序中封装好了易于开发者操作的视图滑块容器,因为swiper组件属性过多,这里不一一介绍,有兴趣可以研究下开发文档。

    <swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' indicator-active-color='{{indicatorSelectColor}}' duration='{{duration}}' circular="true" style="height:175px'>
          <block wx:for='{{bannerDatas}}'>
            <swiper-item>
              <image src='{{item.dakaPic}}'  class="slide-image" lazy-mode='true'  mode='aspectFill' style='height:100%' />
            </swiper-item>
          </block>
        </swiper>
    

    这里顺带介绍下image组件,有两个比较重要的属性

    • lazy-mode : 懒加载,对pagescroll-view下的image才有效。用户滚动页面自动获取更多的图片,不会一次性全部加载
    • mode : 图片剪裁缩放模式,有13种,大家可以根据项目的需求自行选择。

    ③页面跳转(路由跳转)

    这部分使用的是flex布局,将分类平分页面宽度即可。这里较为简单,不贴代码了。点击分类跳转到此分类的页面,下面来介绍下小程序页面的跳转。

    wx.navigateTo({            //保留当前页面 跳转到其他页面,url来表明页面的地址
      url: 'test?id=1'
    })
    
    wx.redirectTo({            //关闭当前页面,跳转到其他页面
      url: 'test?id=1'
    })
    
    wx.switchTab({            //跳转tabbar页面,关闭其他所有非tabbar页面
      url: '/index'
    })
    
    
    wx.navigateBack({          //返回之前的页面,参数delta是返回的页面数
      delta: 2
    })
    
    wx.reLaunch({              //关闭所有页面,跳转到指定页面
      url: 'test?id=1'
    })
    
    

    页面之间相互跳转避免不了值传递,小程序里页面间传值也是很简单,小程序提供了属性data-xxx(名字自取),可以设置对应的值,通过bintap(点击事件绑定)在对应的方法中获取到传递的值通过url 路径拼接相应的参数。

    <view class='read-layout tag-item' data-index='0' bindtap='tagClick'>
       <image class='tag-logo' src='../imgs/tag_read.png'></image>
       <text class='tag-name'>读书</text>
    </view>
    
    
    // 点击标签
    tagClick: function (event) {    //绑定点击事件产生event事件,在
      console.log(event)            //控制台输出event事件对象
      var tagId = event.currentTarget.dataset.index;
      wx.navigateTo({
        url: 'taglist/taglist?tagId=' + tagId,       //传值到下个页面
      })
    },
    
    

    ④template模板使用(重要)

    考虑到模块化的复用,小程序提供了template,以发现列表热门打卡列表为例,将介绍模板的编写以及使用。

    创建template文件夹以及item-hot.wxml 与 item-hot.wxss文件。















    • 编写wxml文件(wxss样式文件这里就不贴出来)
    <!--模板要定义一个名字 作为使用凭据-->
    <template name="hotSignTemplate">
      <view class="list">
        <!-- 创建者信息 -->
        <view class="personal-info">
          <image class="avatar" src="{{headPortrait}}"></image>
          <text class="nickname">{{nickName}}</text>
        </view>
        <!-- 打卡封面 -->
        <image class="sign-cover" mode='aspectFill' src="{{pic}}"></image>
        <!-- 打卡活动名称 -->
        <text class="sign-title">{{activityName}}</text>
        <!-- 参加者信息 -->
        <view class="sign-info">
          <text class="numberop">{{joinNum}}</text>
          <text class="sign-hint1">人参加</text>
          <view class="line2"></view>
          <text class="sign-times">{{dakaNum}}</text>
          <text class="sign-hint1">次打卡</text>
        </view>
        <view class="line3"></view>
      </view>
    </template>
    
    
    • 页面引入template 模板
    <!-- 导入template -->
    <import src="../template/item-hot/item-hot.wxml" />
    
    <view class="home-item">
      <block wx:for='{{signDatas}}' wx:for-item='item'>
        <!-- 模板上不能绑定点击事件,在外面添加一层view -->
        <view bindtap='tapToDetail'  data-id='{{item.id}}'>
          <!-- template使用 这里的 is="templateName" -->
          <template is='hotSignTemplate' data='{{...item}}' />
        </view>
      </block>
    
    </view>
    
    

    wxss文件也要导入template/item-hot/item-hot.wxss,模板样式才能生效

    @import "../../template/item-hot/item-hot.wxss";
    
    

    注意:小程序中template 是不需要在app.json 中注册的,它只是作为页面的组成部分,并不是页面,也没有自己的生命周期,当然我们在template中是可以创建item-hot.js和item.json文件的。


    ⑤底部 TabBar实现

    在上一篇文章中介绍了小程序系统tabbar的配置,小程序提供的tabbar虽然方便,但是不能对其定制,根据要求设置对应的宽高,设置的图片看起来也很模糊,在开发时候舍弃了系统提供的tabbar,根据UI要求编写了自己的tabbar,通过模板的方式创建template/foot_menu/foot_menu,哪些页面需要使用直接以模板的形式引入即可。

    wxml文件:

    <template name="footMenu">
       <!--适配IPhoneX-->
      <view class="{{isIphoneX ? 'footMenuNavWrap-x':'footMenuNavWrap-normal'}}">
        <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='0'>
          <image class="menuIcon" src="{{isAtDiscovery ? '../imgs/discovery_select.png' : '../imgs/discovery_normal.png'}}" mode="widthFix" />
          <view class="text {{isAtDiscovery ? 'activityText' : 'defaultText'}}">发现</view>
        </view>
    
        <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='1'>
          <image class="menuIcon" src="{{isAtManage ? '../imgs/manage_select.png' : '../imgs/manage_normal.png'}}" mode="widthFix" />
          <view class="text {{isAtManage? 'activityText' : 'defaultText'}}">管理</view>
        </view>
    
        <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='2'>
          <image class="menuIcon" src="{{isAtMine ? '../imgs/mine_select.png' : '../imgs/mine_normal.png'}}" mode="widthFix" />
          <view class="text {{isAtMine ? 'activityText' : 'defaultText'}}">我的</view>
        </view>
      </view>
    </template>
    
    
    //wxss文件
    .footMenuNavWrap-x {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 140rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-top: 1px solid #F7F7F7;
    }
    
    .footMenuNavWrap-normal {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 100rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-top: 1px solid #F7F7F7;
    }
    
    .footMenuNavWrap-x .img-text-iphonex {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-bottom: 20rpx;
      align-items: center;
    }
    
    .footMenuNavWrap-normal .img-text-normal {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .footMenuNavWrap-x .menuIcon {
      margin-top: 5rpx;
      width: 38rpx;
      height: 38rpx;
    }
    
    .footMenuNavWrap-x .text {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
    
    .footMenuNavWrap-x .defaultText {
      color: #333;
    }
    
    .footMenuNavWrap-x .activityText {
      color: #7885e8;
    }
    
    .footMenuNavWrap-normal .menuIcon {
      margin-top: 5rpx;
      width: 38rpx;
      height: 38rpx;
    }
    
    .footMenuNavWrap-normal .text {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
    
    .footMenuNavWrap-normal .defaultText {
      color: #333;
    }
    
    .footMenuNavWrap-normal .activityText {
      color: #7885e8;
    }
    
    

    结尾

    本篇文章介绍了日历打卡小程序首页的几个功能点的开发点,今天在写这篇文的时候也是查看了小程序的开发文档,image标签之前在使用时候还是没有lazy-mode 懒加载模式,现在已经出现在文档中。随着小程序不断的更新发展,不断地学习是必要的。写博客也是温故知新,下篇将介绍网络请求以及请求的封装,介绍创建打卡等功能点开发。


    展开全文
  • 微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图。 1、本地图片导入 步骤一:选择最左侧的菜单中的项目 步骤二...

           个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧。微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图。

    1、本地图片导入

    步骤一:选择最左侧的菜单中的项目

    步骤二:选择打开后将图片直接拷贝到新建的image文件夹下
    图片导入完成后,项目的整体目录结构如下图所示,

    2、按屏幕尺寸自适应图片宽和高
    步骤一:编写工具函数,返回封装后的屏幕高度和宽度
    打开根目录下的utils文件夹下的utils.js文件,个人感觉这个类似Java里面的工具类,具体代码如下:
    /**
     * 获取移动端显示屏的宽和高,
     * 参数:e,
     * return viewSize (包含显示屏的宽和高)
     */
    function getViewWHInfo(e){
        var viewSize={};
        var originalWidth = e.detail.width;//图片原始宽 
        var originalHeight = e.detail.height;//图片原始高 
        wx.getSystemInfo({
          success: function (res) { 
            //读取系统宽度和高度
            var viewWidth = res.windowWidth;
            var viewHeight = res.windowHeight; 
            console.log(originalWidth + " " + originalHeight);
            console.log("宽:" + viewWidth + "高" + viewHeight);
            viewSize.width = viewWidth;
            viewSize.height = viewHeight;
          }
        });
        return viewSize;
    }
    //导出接口--必须要写
    module.exports = {
      getViewWHInfo: getViewWHInfo
    } 


    步骤二:编辑脚本文件
    打开index文件夹下的index.js文件,将原有的内容全部删除,并将下列代码直接复制,首先调用require函数将工具类进行实例化,其中data里面设置的是我们在index.wxml文件中需要读取的变量,imageLoad函数将绑定图片加载事件bindLoad, imageUtil.getViewWHInfo(e)该句调用了上面自定义的函数。
    //index.js
    //获取应用实例
    //获取工具类的应用实例 
    var imageUtil = require('../../utils/util.js'); 
    var app = getApp()
    Page({
      data:{
        imageUrl:"../image/1.jpg",
        viewHeigh:"",
        viewWidth:""
      },
      onLoad: function () {
      },
      imageLoad:function(e){
        var viewSize = imageUtil.getViewWHInfo(e);
        //console.log(viewSize.heigh);
        this.setData({
          viewHeigh: viewSize.height,
          viewWidth: viewSize.width
        });
        
      }
    })
    

    步骤三:编辑图片标签
    打开index文件夹下的index.wxml文件,删除原有的全部内容,将下面的图片插入代码直接复制粘贴,其中style表示的是标签的样式,width:{{viewWidth}}表示图片的宽度是取index.js文件中所赋的值,height和src同理,bindload事件表示该图片加载的时候绑定了index.js文件imageLoad函数,并且在图片加载时执行该函数。
     <image 
     style="width: {{viewWidth}}px; height: {{viewHeigh}}px;" src="{{imageUrl}}" bindload="imageLoad">
     </image>


    最后效果图:


    展开全文
  • ios的webui兼容问题,border和border-radius写在同一级元素上会出现类似问题,先写到父级元素上border和border-radius,子级元素只添加border-radius就行
  • 解决方法 为image设置lazy-load懒加载和mode缩放模式 <image class="banner_img" mode='aspectFill' lazy-load='true' src="{{item.image}}"></image>
  • 微信开发者工具(推荐)、 小程序开发助手(微信上的小程序,帮助开发人员在手机微信上真机预览自己的小程序)、 小程序数据助手(在微信中方便的查看运营数据)、 Egret Wing(我已更新到最新版,但预览功能...
  • 小程序在微信开发者工具中,通过构建生成真正的执行代码和安装包,****.wxapkg。wxml和wxss在构建这一步就被转换成了html和css(virtual-DOM)。微信开发者工具中可以得到构建脚本和各个版本的js运行SDK文件。 小程序...
  • 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 此文档面向网页...
  • Android SDK提供了一系列可帮助开发者设计、创建、测试和发布Android应用程序的强大工具,以下是我们编译developer推荐的10款最常用的开发工具。  1.Eclipse w/ADT  虽然Eclipse并非唯一可用于开发Android...
  • 微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一、wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成:   ...
  • 转载于:https://www.cnblogs.com/kunmomo/p/11196036.html
  • 原文是基于微信小游戏,在微信开发者工具、手机端微信小游戏,该方案没问题。 我今天尝试移植到普通web,该方案出现新问题: 1)不使用该方案,则出现锯齿。 2)使用该方案,则正圆变成椭圆。 暂时解决不了。 ...
  • 1、背景音乐播放 2、以上真机测试可行,但是开发工具不可行!! 但是原因很简单: 点击三个小点: 点击取消静音即可! 考,搞了一个上午。。
  • 昨天转载了一篇文章,就是用APPIUM做APP自动化时,定位方法的总结. 昨天晚上把作者关于XPATH定位方法都在实际场景中运用了一次,都能成功解决定位问题. 今天特意做一份思维导图,把作者的思路描绘...
  • 方法有两种: 一:采用css的zoom属性...zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊。 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1、zoom的缩放是相对于左...
  • RabbitMQ 消息队列

    2018-10-23 14:43:28
    RabbitMQ 消息队列 应用 安装参考 详细介绍 学习参考 RabbitMQ 消息队列  RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统。他遵循Mozilla Public License开源协议。 MQ全称为Message Queue, 消息队列(MQ...
  • 微信小程序-仿QQ音乐

    2019-09-17 12:14:27
    因为个人开发者无法发布在线音乐播放小程序,所以开发该小程序目的只为学习小程序开发; 小程序涉及到到所有歌曲资源都来源于QQ音乐,部分API由本人对QQ音乐接口进行了二次封装(我会另外再写一篇文章...
1 2 3 4 5 ... 20
收藏数 4,003
精华内容 1,601
关键字:

微信开发者工具模糊