2019-02-27 11:15:18 weixin_42138029 阅读数 73

1、添加项目时的注意事项:

微信开发者程序不支持打开.wpy类型的文件,导入时只能导入到dist目录,之后按照以下对调试工具进行配置。

2016-12-18 14:46:22 testcs_dn 阅读数 6525

微信公众平台小程序开放公测。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。小程序已经风风火火这么久了,但是开放时间还未确定,到现在也没用上小程序,不知道它究竟有多大的魔力。今天先来了解一下微信小程序的开发者工具。

下载

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

最新版本 0.11.112301

windows 64 、 windows 32 、 mac

安装

没什么可说的,大家看看就是。





安装完成启动之后可能会提示要求访问网络,允许访问。

登录



选择调用类型

创建项目


我只是想安装一下看看,还没有申请AppID,所以这里选择无AppID。

项目创建后开发工具的首页,默认就是调试页面

用过Chrome的开发者工具的小伙伴看这界面是不是感觉很亲切?感觉就是一个模子里出来的。

是不是?

是不是?

编辑界面,只是图中的一个菜单项有点特别:硬盘打开,是打开项目文件目录

项目界面:由于创建的项目没有填写AppID,所以没办法上传体验。

结束语

为什么它和Chrome的开发者工具那么像?
我用SPY++查看了一下微信小程序的开发者工具:

发现和Chrome显示网页内容的窗口标题及类完全一致; 
由此看来微信小程序的最终呈现还是基于浏览器。
我们在开发的时候使用的是转义后的标签,而实际部署后用户端使用的应该还是HTML。
为什么这么说?
小程序也好,轻应用也好,为的就是一个轻,无处不在,随便一个浏览器就可以打开。
但这也是只是一个猜测,而如果不是这样,微信内置一个支持小程序的类浏览器的内核,
虽然在小程序的封装上起到了保护源码的作用,但就设置了一个壁垒,也就是如果想使用小程序还必须安装微信才可以;
当然,现在微信的装机率已经不是问题了。
小伙伴们,你们怎么看?
===========文档信息============ 
版权声明:非商用自由转载-保持署名-注明出处 
署名(BY) :testcs_dn(微wx笑) 
文章出处:[无知人生,记录点滴](http://blog.csdn.net/testcs_dn)
2019-01-27 15:05:13 tigerking1001 阅读数 58

 

编译之后会新增/dist文件

(在此参考一下之前的官方文档就明白了,其他的文档结构自行参照_留坑)

在微信开发者工具中打开项目——打开dist文件

注:微信开发者工具最好只用作调试,有些文件也打不开,参考wepy官方文档的语法高亮。

这里使用的是vscode,,安装非常简单百度一下你就知道

如有需要可以设置中文

在vscode安装wepy语法高亮插件,如图:

注:相关配置详见操作(截图就不放了)

好啦,现在开两个屏幕,可以愉快地一边敲代码,一边看效果了

2018-09-04 10:00:30 weixin_40169642 阅读数 1542

当你下载完wepy案例之后,发现并不能够直接导入微信开发工具中查看,出现的情况如下图所示:

我在网上找了许多解决方案,忙活了一个上午之后终于找到一个完全可以用的链接,里面写得很详细,一步步操作就可以,写下这篇博客是为了防止像我这样的第一次接触wepy的人浪费多余的时间,网上有太多方案是不能彻底解决或者不详细的。

博客的链接地址是https://my.oschina.net/helios51luna/blog/1833013,感谢这位大神留下珍贵的信息。切换到项目目录时,可以采用在指定项目空白处按住shift+鼠标右键,在弹出的小框中选择在此处打开命令窗口就能够进入指定目录,比较方便快捷。

最后的效果就是能够在你的wepy项目下生成一个dist文件,将此文件导入微信开发工具即可,如下图所示:

2019-07-16 16:01:16 weixin_44268473 阅读数 2710

Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv、span等)写前端代码,也可以用微信小程序语法写(view、swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果。

效果图:

微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件)

<style type="less" scoped="scoped">
   .swiper image {
      width: 100%;
      height: auto;
  }

    .swiper-image {
      height: 100%;
      width: 100%;
    }

    .slide-image {
      height: 100%;
      width: 100%;
      display: block;
    }
</style>
<template>
     <view class="swiper">
        <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}"
            style="height:{{imgheights[current]}}rpx;">
            <block wx:for="{{GoodsDatas.imgshow}}" wx:for-key="{{index}}" wx:for-item="image">
               <swiper-item>
                    <image src="{{image.img}}" data-id="{{index}}" class="slide-image" mode="widthFix" bindload="imageLoad" />
               </swiper-item>
             </block>
         </swiper>
     </view>
</template>
<script>
  import wepy from '@wepy/core'
  wepy.page({
    data: {
      circular: true,
      //是否显示画板指示点,根据图片数量自动生成多少个圆点
      indicatorDots: true,
      //选中点的颜色
      //是否竖直
      vertical: false,
      //是否自动切换
      autoplay: true,
      //自动切换的间隔
      interval: 3000,
      //滑动动画时长毫秒
      duration: 1000,
      //所有图片的高度
      imgheights: [],
      //图片宽度
      imgwidth: 320,
      //默认
      current: 0
    },
    imageLoad: function(e) { //获取图片真实宽度
      var imgwidth = e.detail.width,
        imgheight = e.detail.height,
        //宽高比
        ratio = imgwidth / imgheight;
      console.log(imgwidth, imgheight)
      //计算的高度值
      var viewHeight = 750 / ratio;
      var imgheight = viewHeight;
      var imgheights = this.data.imgheights;
      //把每一张图片的对应的高度记录到数组里
      imgheights[e.target.dataset.id] = imgheight;
      this.setData({
        imgheights: imgheights
      })
    },
    bindchange: function(e) {
      // console.log(e.detail.current)
      this.setData({
        current: e.detail.current
      })
    }
  })
</script>

将代码粘过去之后,只需要修改循环对象为图片数据就可以了。

wepy框架

阅读数 1605

没有更多推荐了,返回首页