微信开发者环境数据怎么搞_微信开发者工具调试拿不到微信数据 - CSDN
  • 微信搭建本地开发测试环境

    千次阅读 2019-09-10 13:10:11
    准备工作1.ngrok,微信的接口有一些是被动的接收从微信服务器发送的消息的,所以需要提供一个域名给微信服务器,ngrok可以将本机的指定端口,映射到一个域名。花生壳什么的也可以。 2.微信web开发者工具,微信官方...

    ##准备工作
    1.ngrok,微信的接口有一些是被动的接收从微信服务器发送的消息的,所以需要提供一个域名给微信服务器,ngrok可以将本机的指定端口,映射到一个域名。花生壳什么的也可以。
    2.微信web开发者工具,微信官方的调试工具
    ##测试账号配置
    ###测试账号信息
    在测试账号管理界面,你可以获取到AppID和APPSecret。
    ###接口配置信息
    这里写图片描述

    验证URL有效性成功后即接入生效,成为开发者。如果公众号类型为服务号(订阅号只能使用普通消息接口),可以在公众平台网站中申请认证,认证成功的服务号将获得众多接口权限,以满足开发者需求。

    此后用户每次向公众号发送消息、或者产生自定义菜单点击事件时,开发者填写的服务器配置URL将得到微信服务器推送过来的消息和事件,然后开发者可以依据自身业务逻辑进行响应,例如回复消息等。

    下面的文档描述了这个接口的作用:
    http://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html
    ###JS接口安全域名
    这里写图片描述
    配置在ngrok生成的域名,配置这个配置项的目的是让开发者可以在该域名下调用微信开放的JS接口。
    JS-SDK相关的内容可以看这里:
    http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
    ###测试账号二维码
    这里写图片描述
    用测试账号扫一下这个二维码,就能关注这个测试账号了,回复信息什么的就可以测试了。
    ###体验接口权限列表
    这里写图片描述
    测试账号默认大部分接口都是默认开启的,有几个需要手动开启。
    这里需要注意的是网页授权获取用户基本信息这个。
    这里写图片描述
    如上所示,这里需要配置一个域名,网页授权成功回调的时候,必须是这个域名下的地址才行,不然就报scope参数错误或没有scope权限的错误。
    至此,开发环境就搭建好了,可以按照微信公众平台开发文档里的微信网页开发部分写一个网页授权获取基本信息的demo了。

    展开全文
  • aid=359 本文由本站halfyawn原创:感谢原创者;... ...微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找? 首先分析了一下源码,日志目录应该同NW.JS的应用目录相关,,,查查查,,一直查到NW...

    原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359

    本文由本站halfyawn原创:感谢原创者;如有疑问,请在评论内回复
     

    还是先把问题列出来,让问题来驱动探索:

    微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

    首先分析了一下源码,日志目录应该同NW.JS的应用目录相关,,,查查查,,一直查到NW.JS的C++源码,搞得太复杂,大概知道位置,但还是不确切.
    决定不往这条线找,换另一条路: 
    把日志文件修改输出到我指定目录,再把原来目录输出出来.

    修改了这个文件,其实只修改了一句代码.其它代码作了些命名重构和格式化处理,看起来好看些.//app/dist/common/log/log.js

    
    function init() {
        var _log, fs = require('fs'),
            log = require('log'),
            path = require('path'),
            dirConfig = require('../../config/dirConfig.js'),
            // logPath = dirConfig.WeappLog,
            logPath = 'D:/develop/wxapplet_devtool/log/', //dxb20161111 为方便,这儿暂时写死
            a = 10;
        if (global.isDev || process.execPath.match('nw.exe') ||
            process.execPath.match('nwjs.app'))
            _log = console;
        else {
            var n = JSON.parse(localStorage.logFiles || '[]'),
                date = new Date,
                logName = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() +
                '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getMilliseconds() +
                '.log',
                logFilename = path.join(logPath, logName);
            if (n.length > a) {
                var p = n.shift();
                fs.unlink(p, function() {})
            }
            n.push(logFilename), localStorage.setItem('logFiles', JSON.stringify(n)),
                _log = new log('info', fs.createWriteStream(logFilename))
        }
        _exports = _log
    }
    var _exports;
    init(), module.exports = _exports;

    然后就用它找找我想需要的东西吧,,比如说,,之前说的日志与配置文件夹不好找....我就用日志文件把它输出来...:

     
    //app/dist/utils/tools.js 约40行处,(位置与变量名可能不一样,我手工重构过)
            getAppConfig: function() {
                var dataPath = nw.App.getDataPath(),
                    configPath = path.join(dataPath, '..', 'config.json'),
                    appCfg = {
                        isDev: !!process.execPath.match('nw.exe') ||
                            !!process.execPath.match('nwjs.app')
                    },
                    hasConfig = fs.existsSync(configPath);
                log.info('[MY DEBUG]dataPath=' + dataPath); //加上这么一句.. 

    好了,现在打开微信小程序工具一运行..看见有日志在指定目录生成了...我知道答案了:

    C:\Users\(这儿是WINDOWS登录用户名)\AppData\Local\微信web开发者工具\User Data
    以下为几个目录:

    基本的数据目录
    C:\Users\(这儿是WINDOWS登录用户名)\AppData\Local\微信web开发者工具\User Data

    日志目录
    C:\Users\(这儿是WINDOWS登录用户名)\AppData\Local\微信web开发者工具\User Data\WeappLog

    项目列表
    C:\Users\(这儿是WINDOWS登录用户名)\AppData\Local\微信web开发者工具\User Data\WeappProject
    内容是JSON文件,,,可以文本编辑或者程序处理JSON格式..

    开发环境中小程序运行存储的数据
    C:\Users\(这儿是WINDOWS登录用户名)\AppData\Local\微信web开发者工具\User Data\WeappStorage


    ........
    其它目录有兴趣的朋友自己研究吧...

    转载于:https://www.cnblogs.com/wxapp/p/6056581.html

    展开全文
  • 本人对微信小程序开发是小白(对html,css,js等有一点基础),但是想学微信小程序的开发,我想知道应该装些什么,我查了一下有的说有公众号和微信开发者工具就行,有的又说要腾讯云服务器什么的,还有域名什么的。...
  • 前言 由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且...开发者工具 系统:win7及以上版本 工具 安装和建立工程都很...

    前言


            由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习笔记,以后可以参考,也是一种回忆,如果能够给有缘阅读到的人一点点帮助,那真是荣幸之至。


    准备



    工具


            安装和建立工程都很简单,APPID暂时选测试号或者不填(如果需要上线才需要用真实的ID),语言选JavaScript。新建的工程里有默认的代码,刚开始学习看不懂那些代码,将其删除即可。一眼望去,我们可以看到开发者工具主要分为五个部分,仿真器(仿真移动设备),编辑器(写代码)、调试器、目录树和工具栏,前面四个都可以通过在工具栏中设置而隐去。

                        

     

    仿真器(Simulator)

            仿真器中有手机型号和状态栏的选择,最重要的是手机型号。一般选择iphon6为基准,因为我们开发的小程序是要应用到多种移动设备上去的,而设备的屏幕分辨率又各有不同,所以如果用px写死样式,那么换一个设备样式就会坏掉。微信小程序用rpx来解决这个问题的,也就是在一个宽度为375物理像素的屏幕下,1rpx = 375/375=1px。而对于iPhone6,屏幕宽度为750个物理像素,依旧是375px,所以得出1rpx = 375 / 750 px = 0.5px。

                              

    目录树(Drectory Tree)

            目录树与物理地址之间存在映射关系,而在小程序中访问只是采用相对地址。我们可以看到默认工程的目录树主要包含了三个部分,pages目录,utils目录和一些全局的文件。pages里存放的一般是每一个页面,默认工程里包含两个页面,首页index和一个日志页,每个页面由对应的布局样式文件组成。utils主要放一些工具型函数,比如网络请求,在util.js中实现,然后导出,最后再在需要的页面导入就可以使用其中的某些部件。我们以后可能还会用到组件(Component),我们就可以再建一个名为Component的目录用来存组件。

                                                                     

    编辑器(Editor)

            如果不喜欢背景的颜色,或者字体大小,可以在设置->外观设置中修改。

                                               


    结构


            代码由.js文件(小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求),.json文件( JavaScript Object Notation,是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色),.wxml文件(WeiXin Markup language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构),.wxss文件(WeiXin Style Sheet,是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改)组成。

        全局配置文件

    • Project.config.json:用于配置开发环境。
    {
    	"description": "Project configuration file",
    	"packOptions": {
    		"ignore": []
    	},
    	"setting": {
    		"urlCheck": true,
    		"es6": true,
    		"postcss": true,
    		"minified": true,
    		"newFeature": true,
    		"autoAudits": false
    	},
    	"compileType": "miniprogram",
    	"libVersion": "2.6.6",                             //库版本
    	"appid": "wx866f52f21b24eed3",                     //appID
    	"projectname": "miniprogram-test-2",
    	"debugOptions": {
    		"hidedInDevtools": []
    	},
    	"isGameTourist": false,
    	"condition": {
    		"search": {
    			"current": -1,
    			"list": []
    		},
    		"conversation": {
    			"current": -1,
    			"list": []
    		},
    		"game": {
    			"currentL": -1,
    			"list": []
    		},
    		"miniprogram": {
    			"current": -1,
    			"list": []
    		}
    	}
    }
    • app.wxss:整体样式文件,container类可以被项目的每一个页面使用(公共样式)。
    /**app.wxss**/
    .container {
      height: 100%;                                        //高度是整个容器高度
      display: flex;                                       //布局方式:flex
      flex-direction: column;                              //主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排列。                                                  
      align-items: center;                                 //非主轴方向居中对齐
      justify-content: space-between;                      //项目间间距相等,第一个项目离主轴起点和最后一个项目离主轴终点距离为0
      padding: 200rpx 0;                                   //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
      box-sizing: border-box;                              //用属性box-sizing来调整框模型
      background-color: red;                               //背景颜色
    } 
    • app.json:小程序根目录下的 app.json 文件用来对微信小程序进行全局配置(静态),文件内容为一个 JSON 对象,pages和window为其众多属性中的两个。前者用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,后者用于用于设置小程序的状态栏、导航条、标题、窗口背景色。(注:实际书写代码不能放注释
    {
      "pages":[                                          //	页面路径列表
        "pages/index/index",                              
        "pages/logs/logs"
      ],
      "window":{                                         //全局的默认窗口表现
        "backgroundTextStyle":"light",                   //下拉loading的样式,仅支持 dark/light
        "navigationBarBackgroundColor": "#fff",          //导航栏背景颜色
        "navigationBarTitleText": "WeChat",              //导航栏标题文字内容
        "navigationBarTextStyle":"black"                 //导航栏标题颜色,仅支持 black / white
      }
    }
    • app.js:整个项目的逻辑处理。包括一些生命周期函数的使用,如onLoad、onshow和onReady等。

        页面配置文件

    • .json:每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
    • .wxml:用于构建出对应页面结构
    <!--index.wxml-->                                                       <!--view:视图容器 类-->
    <view class="container">                                                <!--container:全局的一个容器,样式在app.wxss中-->               
      <view class="userinfo">                                               <!--userinfo:存放用户信息的容器,在index.wxss中设置样式-->
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>                    <!--button:表单组件:按钮-->
        <block wx:else>                                                     <!--  <block/> 标签可将多个组件包装起来-->
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>                                                   <!-- image 媒体组件:图片-->
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>      <!-- image 文本组件;userinfo-nickname:昵称容器,在index.wxss中设置样式-->
        </block>
      </view>
      <view class="usermotto">                                              <!-- image 签名容器,在index.wxss中设置样式-->
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    
    • .wxss:按照容器类,调整页面样式,提升视觉效果。
    /**index.wxss**/
    .userinfo {                                              
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;                                   //圆形为50%,小于50%为圆角
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;                                   //外边框顶部与其他容器外边框间隔200px
    }

     


    hello world!


               最简单的hello world只需要一行代码就可以实现,我们先将除Project.config.json外,其他文件中的内容删除,包括logs目录,然后依次在app.json、index.js、index.wxml中填入如下代码,就可以实现hello word。

    {"pages":[ "pages/index/index"]}
    
    Page({})
    <text>hello world!</text>

            我们来一点一点增加难度,完成一个进阶版的hello world。首先引入变量,在Page类的data属性中添加hello变量,并赋值。然后用{{}}去使用它。

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        hello:"hello world!"
      }
    }
    <view>{{hello}}</view>

            我们可以给hello word修改一下样式,比如修改背景颜色,修改字体打下颜色等,先给容器取个名字:hello,然后设置样式。

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
    </view>
    .hello_group{
        background: #0c960c;                      //将鼠标放在#0c960c,会弹出色谱,可以根据这个选择自己喜欢的颜色
        width: 750rpx;
        height: 750rpx;
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }

            微信小程序的view容器 支持两种布局方式:Block 和 Flex,这里我们引入Flex布局来折腾一下我们的hello world,这里设置文字为水平竖直方向居中,选择水平方向从左到右为主轴。

    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }

            我们把hello world放到两个分别叫hello和word的容器里,然后再用Flex布局。

    Page({
      data: {
        hello:"你好",
        world:"世界"
      }
    )
    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
    </view>
    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
    
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }

              我们接着可以用image组件给小程序一个世界的图片,https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= 1879049657,3980794066&fm=11&gp=0.jpg。然后发现布局乱了,我们来修改一下,虽然还是比较丑,但是比刚才似乎好了不少。

                    

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
      <image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
    </view>
    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;                                                       //换行
    
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }
    
    .world_image{
      width: 500rpx;
      height: 500rpx;
      border-radius: 50%                                                       //圆形
    }

            我们可以来继续搞事情,底下那么多的空白让强迫症患者肯定很不舒服,加点东西,然后加个滑动窗口。来加一点文字吧,比如就是我们地球的简介。先从百度百科上复制一点文字下来:“地球(Earth)是太阳系八大行星之一,按离太阳由近及远的次序排为第三颗,也是太阳系中直径、质量和密度最大的类地行星,距离太阳1.5亿公里。地球自西向东自转,同时围绕太阳公转。现有40~46亿岁, [1]  它有一个天然卫星——月球,二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米,极半径6356.752千米,平均半径约6371千米,赤道周长大约为40076千米,呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里,其中71%为海洋,29%为陆地,在太空上看地球呈蓝色。地球内部有核、幔、壳结构,地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体,是包括人类在内上百万种生物的家园。”然后加进去。再设置一下状态栏。

    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 700rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    
    }
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }
    .world_image{
      width: 500rpx;
      height: 500rpx;
      border-radius: 50%
    }
    .brif_group{
    
        margin-top: 20rpx;
        margin-bottom: 80rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }
    .brif_title{
        color: #13b3e4;
        margin-bottom: 20rpx;
        font-size: 50rpx;
    }
    
    .brif_content{
    font-size: 25rpx;
    
    }

     

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
      <image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
    </view>
    <view class = "brif_group">
        <view class = "brif_title">地球(Earth)</view>
        <text class = "brif_content">太阳系八大行星之一,按离太阳由近及远的次序排为第三颗,也是太阳系中直径、质量和密度最大的类地行星,距离太阳1.5亿公里。地球自西向东自转,同时围绕太阳公转。现有40~46亿岁, [1]  它有一个天然卫星——月球,二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米,极半径6356.752千米,平均半径约6371千米,赤道周长大约为40076千米,呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里,其中71%为海洋,29%为陆地,在太空上看地球呈蓝色。地球内部有核、幔、壳结构,地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体,是包括人类在内上百万种生物的家园。
        </text>
    </view>

    app.json

    {
      "pages":[
        "pages/index/index"
      ],
    
      "window":{ 
        "backgroundTextStyle": "light", 
        "navigationBarBackgroundColor": "#fff", 
        "navigationBarTitleText": "Hello", 
        "navigationBarTextStyle": "black" 
      }
    }
    

                                             

            还有很多没有写,下一篇再继续,太多了看起来累,刚刚开始学习,感觉基本的操作就是先写很多个容器,然后往容器里填写东西,然后再设置一下样式。


    参考


    https://developers.weixin.qq.com/miniprogram/dev/reference/

    https://developers.weixin.qq.com/miniprogram/dev/component/

    展开全文
  • 微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维。 api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键都...

    微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维。

    • api提示不全,要一个个查api啊,写代码超级慢啊
    • 很多必备的快捷键都没有,比如全选关键字、快速复制一行等等
    • 颜色主题不能选?不喜欢白色风格怎么搞
    • 没有插件 没有插件 没有插件 重要的事情说三遍

    无奈笔者走上了尝试各种IDE的旅途,现在说一下笔者对于IDE的需求或者设想:

    • 轻量级:我不喜欢那种类似Eclipse的庞然大物,即使出现类似工具我也不会去使用,因为其中90%的功能都不会被用到。
    • 可定制化的代码着色:代码着色是必备功能,如果支持颜色模板最好
    • 准确的代码提示:这个太重要了,大家懂得
    • 可调试:IDE可以进行调试或运行
    • 实时预览界面:由于应用开发与网页不同,实时预览必须在程序运行时才会将动态数据加载到界面,这块我不抱太大希望

    针对上面几个需求,笔者前后尝试了目前市面上支持小程序开发的工具,呕心沥血总结如下,以供大家参考。

    微信小程序官方开发工具

    注意,这个小标题我并没有使用“IDE”字眼。因为在笔者眼中,它真的是个工具,而不是一个IDE。官方工具中的代码编辑功能,就是将vscode的代码编辑功能嵌入到工具中,不足以支撑开发。

    优点

    因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势,如果不是他代码编辑功能太弱的话。

    • 官方工具,可调试,可预览
    • 基本的代码编辑、智能提示、调试等功能都有
    • 项目管理、创建、手机预览、代码提交审核
    • 官方维护更新

    缺点

    不好的地方也很明显,总体而言是一款工具而不是IDE。糟糕的代码编辑功能,写起代码非常别扭,这是我放弃它的最重要原因。

    • api提示不全,要一个个查api啊,写代码超级慢啊
    • 很多必备的快捷键都没有,比如全选关键字、快速复制一行等等
    • 颜色主题不能选?不喜欢白色风格怎么搞
    • 没有插件 没有插件 没有插件 重要的事情说三遍

    总结

    目前因为需要用到微信web开发工具进行小程序的创建、调试、查看、预览、上传,所以这个工具必不可少。但是代码编辑功能实在太差,推荐使用其它第三方代码编辑工具代替。

    Sublime Text 3

    说完官方工具,聊一聊我日常工作最常用的工具 sublime text 3,它定位于代码编辑器而不是IDE,试用了一下,在代码提示方面只能算得上一般般。

    优点

    • 打开文件速度倍儿快、UI简洁大方
    • 代码编辑体验舒适、高效
    • 拥有大量插件,针对不同需求基本上能找到对应插件来满足
    • 第三方开发者开发小程序插件用于代码着色和代码提示

    缺点

    • 没有调试,没有预览
    • 因为是第三方开发者编写的插件,代码提示也不是非常全面

    总结

    除了本身的代码编辑优势,对于小程序开发并没有什么实质性帮助,最终Sublime Text方案也被笔者放弃。

    不得不吐槽 Sublime Text的这个插件,搞了好久才把它run起来,郁闷。

    注:插件下载链接在文末

    Vim + WEPT

    Vim这个编辑器之神一直是我的装逼利器,关于vim的好我就不多说了,免得Emacs的人过来骂我。

    网上有人已经开发了对应插件,叫做 Wxapp.vim 这个插件我简单用了一下,包含文件检测、智能补全、文档跳转、语法高亮、缩进、代码段、单词列表、语法检查等功能。总体来说还是不错的,但存在一个严重问题。笔者在做服务器开发的时候,基本使用Vim编程,在配合一些其他的插件和工具直接在终端运行调试。但微信小程序这个我用了半天不得不放弃,因为要经常在Vim和微信小程序官方工具之间来回切换,似的笔者极为烦躁。按照笔者一惯作风,使用Vim的时候就应该把鼠标扔掉。

    但最终我还是发现了一个补救方案,下面会介绍一下。

    优点

    • 代码高亮,代码提示等功能齐全。
    • 有小程序开发插件Wxapp.vim可以使用,上文已经提到

    缺点

    • 无法调试预览
    • 另外一个问题在于很多人搞不定Vim,这货学习曲线优点高
    • UI和使用方式不符合大多数人的习惯

    总结

    ‘WEPT’这个货解决了我上面Vim说的痛点。

    WEPT 是一个微信小程序实时开发环境,它的目标是为小程序开发提供高效、稳定、友好、无限制的运行环境。也就是说,它本身是一个实时运行环境,可以做到实时预览和调试。同时调试可以借助chrome浏览器完成。和前面Vim搭配完美解决了代码编辑到调试再到预览的问题。

    这货不算是IDE,笔者也不做优点缺点分析了。总体来说,WEPT+VIM+Plugin 是个不错的解决方案。推荐大家使用。

    注:插件下载链接在文末

    WebStorm

    WebStorm网上有个插件,可以实现代码提示,不能做调试和预览,并且属于重度工具,所以笔者没有使用WebStorm。喜欢厚重感的童鞋可以尝试一下这个工具。

    优点

    • 有插件可以实现代码高亮,代码提示等功能
    • 有非常成熟和非常丰富的功能
    • 各种快捷键

    缺点

    • 无法调试预览
    • 功能比较多、比较臃肿

    总结

    总结来说,webstorm和上述几个一样,代码编辑功能强大但是需要插件支持才可以开发小程序,而且体积臃肿。

    注:插件下载链接在文末

    Egret Wing

    Wing这个东西算的上是笔者看到的第一个公司级别支持的IDE了,所以功能做的相当成熟。下载尝试了一下,就目前来说除了上面的Vim方案,这个应该是目前对比后最佳的IDE工具了。

    优点

    • 支持代码提示,代码高亮
    • 实时预览和调试和切换不同分辨率预览
    • 居然支持项目创建?!
    • 支持新建page模板文件
    • 双周更新

    缺点

    • 实时界面预览属于静态渲染,对于界面中的动态数据无法进行预览,只能在调试时进行预览。
    • 无法进行可视化拖拽生成界面(是我太贪心了么?)

    总结

    Wing是唯一一款支持实时预览功能的IDE,包括微信官方都没有实时预览而是需要编译后预览,对于大懒人的笔者来说有实时预览写界面的时候不要太爽!wing不但可以而且还可以创建项目,新建page模板,运行一下项目发现,这个预览界面和微信官方开发工具非常相似。优先推荐使用。

    总结

    整理个表,大家看自己心情选择。

    环境/工具 简述 代码高亮 代码提示 调试 实时预览 软件/插件下载地址
    官方工具 微信小程序官方工具 支持 极其弱 支持 支持 下载软件
    Egret Wing 首款支持微信小程序开发的IDE。 支持 支持 支持 支持 下载软件
    Sublime Text 3 Sublime Text需要安装插件。 支持 支持 不支持 不支持 插件
    Webstorm WebStorm 重量级IDE 支持 支持 不支持 不支持 插件
    vim + WEPT 强大的组合工具 支持 支持 支持 支持 Vim插件WEPT
    展开全文
  • 微信小游戏 小游戏的运行环境在 iOS 上是 JavaScriptCore,在 Android 上是 V8,都是没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对象。因此当你希望使用 DOM API 来创建 Canvas 和 Image 等元素的...
  • 但是微信为了防止开发者收集玩家的好友信息,了一个开放数据域OpenDataContext来提供有限制的好友功能。 可以把微信的开放数据域理解成一个阉割的程序环境,在域中开发者不能调用文件系统的功能,没有联网功能。...
  • 微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维。 api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键...
  • 原文:微信小程序性能优化方案——让你的小程序如此丝滑 作者:杜俊成要好好学习 Fundebug经授权转载,版权归原作者所有。 微信小程序如果想要优化性能,有关键性的两点: 提高加载性能 提高渲染性能 接下来分别...
  • 写完之后,最开始用的“微信企业号开发者工具”做的测试,从开始写到最后测试都没问题,但是测上线的候,就 暴漏出问了,我明明只点了一次提交按钮,但是最后存到数据库里数据竟然有两条。 懵了,我手快?点了两次...
  • python+appium+mobile phone爬取微信运动数据,顺便数据分析一波好友们的运动情况 前言 微信运动只能看到前30天的数据,超过的会过期而拿不到,我也是现在才知道的。本来还想拿多一点数据的哈哈。 ...
  • CocosCreator 打包微信小游戏

    千次阅读 2019-07-11 16:41:57
    1. 下载微信开发者工具并安装,申请小游戏ID,在ccc的文件-->设置-->原生环境中,指定路径 2.发布平台选择微信小游戏,填入appid,这里要注意,小程序的id 和小游戏的id不同。不能混用。 3.如果包体大于4M是...
  • 这里写自定义目录标题vue通过NodeJs本地获取微信access_token及签名,并调用微信接口1....开通&quot;开发者模式&quot;3.查看公众号基本信息4....创建vue项目7.node配置微信签名...使用微信开发者工具调试 vue通过...
  • 微信jssdk

    2018-05-30 10:00:06
    最近遇到了一个微信分享的问题,一个客户的网站他要求要做一个微信分享功能。码农嘛肯定先在网上找插件,像...首先打开微信开发者文档搜索jssdk还有微信的一些合法网站设置之类的就自己去看文档吧https://mp.we...
  • 原文地址:... 本文由本站halfyawn原创:感谢原创者;... ...微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找? 首先分析了一下源码,日志目录应该同NW.JS的应用目录相关,,,查查
  • 新手入门宝典:从零开始做微信小程序开发

    万次阅读 多人点赞 2017-06-09 14:16:27
    开发前必读简要 基于大量无效开发,无法上线的案例,...微信开发者工具【项目】详解 为什么我的小程序通过审核,但是搜索不到呢?原因是必须在后台内点击发布,才会发布;| 链接 小程序开发上线(发布)步骤 这
  • 首先给自己个服务器(微信接入需要拥有自己的服务器资源,就是外网服务器,可以给别人访问的) 我购买的是阿里云的服务器(最低配置) 服务器系统为:win2012数据中心版 阿里云服务器 服务器环境为:...
  • ios 2016微信支付及支付宝开发

    千次阅读 2017-02-28 23:55:55
    神灯产品用户体验群:573431381...第一种:微信支付1、进入微信开发者平台,选择我要接入2、根据流程 注册 认证 创建应用等等按照下图来就行了注意选择你想要用的东西 这里是移动应用支付然后查看开发者文档链接: ht
  • 小程序在微信开发者工具中,通过构建生成真正的执行代码和安装包,****.wxapkg。wxml和wxss在构建这一步就被转换成了html和css(virtual-DOM)。微信开发者工具中可以得到构建脚本和各个版本的js运行SDK文件。 小程序...
  • 每天都有奇怪的知识增加,嘻嘻嘻。 今天试试用uniapp 做小程序云开发,通过腾讯云给手机发送短信。 之前没用过uniapp,找了会儿uniapp 小...再运行到微信开发者工具。 记得配置你的云环境,就是你的云开发后台里的那
1 2 3 4 5 ... 20
收藏数 4,388
精华内容 1,755
关键字:

微信开发者环境数据怎么搞