精华内容
下载资源
问答
  • 微信开发者工具(小程序)源码
  • 微信页面在PC侧查看时,无法实现WeixinJSBridge接口,也无法正常体验流程,故pc版jsBridge登场了 使用方式 chrome打开任意页面,添加书签,标题写 JSBridge,内容写以下内容 [removed]void((function(){var d=...
  • vx_CHJSQ 使用微信开发者工具制作一个称呼计算器 参考资料 qq_40196661 《微信小程序---简易计算器》 CSDN anaerobic_me 《小程序的button跳转》 CSDN 欢迎关注 微信小程序:点滴问候
  • weixin--shop 这是用微信开发者工具做的商店项目 在暑假的时候进行了微信小程序的学习,在学习完小程序后,做了商城项目来进行练手
  • Linux微信web开发者工具linux 下使用微信web开发者工具.DescriptionLinux微信web开发者工具, 可在 linux 桌面环境跑起 微信开发者工具,原理是 微信开发者工具 本质是 nw.js 程序, 把它移植到 linux 下没大问题....

    Linux微信web开发者工具

    linux 下使用微信web开发者工具.

    Description

    Linux微信web开发者工具, 可在 linux 桌面环境跑起 微信开发者工具,

    原理是 微信开发者工具 本质是 nw.js 程序, 把它移植到 linux 下没大问题.

    负责编译 wxml 和 wxss 的 wcc 和 wcsc (可能还有其他功能),

    则利用 wine 来跑即可.

    Usage

    下载项目和初始化

    git clone https://github.com/cytle/wechat_web_devtools.git

    cdwechat_web_devtools

    # 自动下载最新 `nw.js` , 同时部署目录 `~/.config/wechat_web_devtools/`

    ./bin/wxdt install

    启动ide,开发和调试网页

    运行准备:

    GUI环境

    ./bin/wxdt # 启动

    启动ide,开发和预览小程序

    运行准备:

    GUI环境

    并且已经执行过./bin/wxdt install

    ./bin/wxdt # 启动

    命令行和HTTP调用

    运行准备:

    GUI环境,命令行和HTTP调用会自动启动ide(服务器没条件的可以使用docker)

    并且已经执行过./bin/wxdt install

    在ide的设置中开启服务端口: 设置 -> 安全 -> 服务端口(开启)

    命令行工具所在位置: /bin/cli

    端口号文件位置:~/.config/wechat_web_devtools/Default/.ide

    微信文档参考:

    Docker

    未安装wine,仅限cli调用

    可以直接run

    docker run -it \

    -v $PWD:/projects \

    canyoutle/wxdt \

    sh -c "cli -l && cli -p /projects/your-project"

    或是启动一个持久的容器

    docker run -d \

    --name wxdt \

    -p 6080:80 \

    -v $PWD:/projects \

    canyoutle/wxdt

    docker exec -it wxdt cli -l # 登录

    docker exec -it wxdt cli -p /projects/your-project # 预览工程

    docker stop wxdt # 暂停容器

    docker start wxdt # 下次使用,不用再run,可以直接exec

    其它说明

    安装Wine

    请参考搜索引擎安装 Wine,以下是Ubuntu下两种安装

    1. 安装wine-binfmt

    sudoapt-get installwine-binfmt

    sudoupdate-binfmts --import /usr/share/binfmts/wine

    2. 正常安装wine

    dpkg --add-architecture i386 \

    && wget -nc https://dl.winehq.org/wine-builds/winehq.key \

    && apt-key add winehq.key \

    && apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ bionic main' \

    && apt-get update \

    && apt-get install -y --no-install-recommends --allow-unauthenticated winehq-stable

    ./bin/wxdt install 报错失败

    ./nw: error while loading shared libraries: libnw.so: cannot open shared object file: No such file or directory

    该错误是由 nw.js 下载失败所致.

    删除缓存, 重新下载即可.

    rm -rf /path/to/wechat_web_devtools/dist

    rm -rf /tmp/wxdt_xsp

    # 请务必等待执行完成

    ./bin/wxdt install

    参考

    wcc 和 wcsc 编译错误

    是wine没安装好导致的,或是没有成功替换wcc 和 wcsc两个二进制文件

    方案一: 安装wine并且执行./bin/wxdt install

    方案二: 安装wine-binfmt

    完成后, 点击 编译 即可.

    参考:

    更新到最新版

    方案一: 直接从当前项目源码 进行 更新 (稳定, 推荐)

    git pull origin

    方案二: 使用腾讯原始安装程序 进行 自助复制更新 (及时, 自行折腾)

    注: 如果抽风了, 可以尝试使用 git reset --hard 等操作, 还原到最初的状态.

    执行更新, 自动下载最新 Windows x64 版开发者工具, 并且使用7z解压.

    ./bin/update_package_nw.sh

    方案三: 同上 手动指定 -l -v (可指定预发布版或开发版)

    注: -l -v 选项务必同时指定, 并且版本号 形如1.02.2001191

    ./bin/update_package_nw.sh -l -v

    Tips

    运行没问题,欢迎PR

    Ubuntu环境下编辑器字体安装

    Ubuntu环境下默认没有Cosolas字体,同时目前无法修改字体,因此下载安装Consolas字体是较优方案,使得编辑器将显示更舒服。

    下载https://github.com/kakkoyun/linux.files/raw/master/fonts/Consolas.ttf 至/usr/local/share/fonts or ~/.fonts

    sudo fc-cache -f重建字体缓存

    确认字体安装成功

    sudofc-list|grep Consol

    .fonts/Consolas.ttf: Consolas:style=Regular

    重启微信开发者工具

    卸载

    关闭 微信web开发者工具

    项目文件夹下运行 ./bin/wxdt uninstall (删除桌面图标、微信web开发者工具配置目录),

    开发者工具配置文件, 所有工程和登录信息均会消失

    删除项目文件夹

    Arch Linux

    截图

    赞赏

    Changelog

    免责声明

    微信开发者工具版权归腾讯公司所有,本项目旨在交流学习之用。如有不当之处,请联系本人,邮箱:canyoutle@gmail.com

    展开全文
  • 微信开发者工具

    千次阅读 2020-09-04 17:21:21
    文章目录微信开发者工具存在的原因微信开发者工具底层框架代码编译模拟器 微信开发者工具存在的原因 微信开发者工具存在的原因肯定是因为当时其它开发者工具写不了微信小程序。 因为小程序渲染层和逻辑层分离,...

    微信开发者工具存在的原因

    微信开发者工具存在的原因肯定是因为当时其它开发者工具写不了微信小程序。
    因为小程序渲染层和逻辑层分离,webstorm 之类的网页开发工具是写不了写小程序的,必须使用微信开发者工具。
    微信开发者工具是小程序开发生态一站式IDE,其功能有:代码开发、编译运行、界面和逻辑调试、真机预览、发布版本等。

    微信开发者工具底层框架

    底层模块:基于nw.js ,使用node.js、chromium以及系统API来实现

    用户交互层:使用React、Redux等前端技术框架来搭建,可以跨Mac和Windows 平台使用。

    在这里插入图片描述

    代码编译

    文件编译
    微信的渲染环境无法直接理解wxmlwxss文件,所以微信开发者工具会用一个二进制的wxml编译器把wxml和wxss文件编译成js 后放到微信的渲染环境中运行。
    对于js 文件,在代码上传之前会被ES6转ES5、代码压缩等,最后合并成一个app-service.js
    在这里插入图片描述

    模拟器

    小程序模拟器
    小程序模拟器模拟可以模拟小程序在不同型号的真实设备上的效果。
    因为小程序运行环境的不同,我们要在不同型号的手机上测试小程序。

    • 在iOS微信客户端上,小程序的JavaScript代码是运行在JavaScriptCore中。
    • 在Android微信客户端上,小程序的JavaScript代码是通过 X5 JSCore来解析的。
    • 微信开发者工具使用一个隐藏着的Webivew来模拟小程序的逻辑运行环境。

    微信开发者工具中逻辑层、渲染层和客户端之间的通信,使用的是WebSocket模拟的。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 腾讯卡通 腾讯漫画+微信小程序源码,下载放到开发者工具就可以使用!第一次上传开放源码,如果此源码帮助到大家,别忘了给个star哟〜
  • 微信开发者工具的用途开发微信小程序和公众号网页开发小程序添加小程序项目在小程序的管理页面可以增删项目添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用)小程序编辑器功能头部是编辑器的...

    微信开发者工具的用途

    开发微信小程序和公众号网页开发

    小程序

    添加小程序项目

    在小程序的管理页面可以增删项目

    添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用)

    小程序编辑器功能

    头部是编辑器的基本功能,包括打开关闭新建文件,编辑设置,界面,快捷键之类的设置

    左上角是用户的信息和用户要是否要显示模块

    左边是选择手机型号,预览百分比,信号选择,页面预览,打开路径,场景值(怎么进入小程序的区别),页面参数等信息

    中间上边是编译,调试,预览,远程调试,切后台(点击后就弹出场景值),清除各种缓存

    右上角是上传到腾讯服务器,测试服务器的按钮,上传需要填写必要的信息

    点开右上角的详情是这个项目的基本配置信息。基出调试库是sdk的版本版本越高功能越强大。项目配置主要是代码转移,压缩,补全,是否检验域名。域名信息主要是在小程序平台配置的安全域名,微信会根据域名验证是否安全。腾讯云状态我理解是项目在腾讯云部署的话一些配置

    代码编辑左边是目录列表,右边是单个文件代码

    小程序调试工具

    console:代码输出,报错

    source:当前项目编译后的脚本文件

    network:观察请求的情况

    security:看着像是安全方面的东西,有人懂给我讲一下

    stroage:显示当前stroage存储情况

    appData:显示当前页面data数据情况

    wxml:页面结构和对象的css

    sensor:模拟地理位置和重力感应

    trace:我研究这是链接手机调试的东西,没太搞懂

    公众号开发

    编辑器头部只有前进后退一些基本功能,输入框里面是调试的网页链接

    展示区基本上一样

    调试区跟chrome的一样

    小程序示例

    搜小程序示例。示例是腾讯的demo,可以让人快速的了解上手开发。地址https://github.com/Hao-Wu/WeApp-Demo

    小程序开发助手

    搜小程序开发助手。管理开发进度和线上版本

    vue开发小程序

    由美团实现的vue开发小程序简称mpvue。官网(http://mpvue.com/)

    展开全文
  • 微信开发着工具介绍及截图,主要包含怎么查看源码,怎么调试,
  • 微信开发者工具是微信小程序官方指定的开发工具,但是微信官方没有推出Linux版本,幸好很多牛人自己制作了能够在Linux中运行的微信开发者工具版本。该文中便是采用github中开源的linux版开发者工具。 一、准备 ...

    微信开发者工具是微信小程序官方指定的开发工具,但是微信官方没有推出Linux版本,幸好很多牛人自己制作了能够在Linux中运行的微信开发者工具版本。该文中便是采用github中开源的linux版开发者工具。

    一、准备

    安装前需要下载或者克隆开发者工具源码,地址:https://github.com/dragonation/wechat-devtools

    二、安装

    该开源项目中提供了两种安装方式,为了尽量减少错误,推荐下载release包安装。下面的步骤以及对出现的问题解决基于release包。

    1、下载release包,下载到放软件的任意文件夹或者下载好后剪切到放软件的文件夹。

    2、使用tar -zxvf命令解压tar包

    3、进入解压后的文件夹,打开终端执行./bin/wechat-devtools

    执行完以上三步之后如果没有在终端中报任何错误,或者重复报一个错误,但是开发者工具能够正常运行也是没有问题的。

    三、问题解决

    在安装过程中遇到了两个问题,提了isuse,地址:https://github.com/dragonation/wechat-devt

    展开全文
  • 我们下载了其它人的源代码,想要编译,当用微信开发者工具打开时,应该将该项目的appid修改为我们自己的。 两种方法: 一、点击菜单:工具->项目详情,修改为申请的 AppID 二、修改 project.config.json中的...
  • 测试小程序涉及到业务时,可以使用微信开发者工具测试小程序 1、本地安装微信开发者工具、VS code工具 2、拉代码到本地,在CMD中执行命令 git clone 代码仓库路径(如:...
  • <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1622631837373.jpg" /></p>  </p>
  • 从网上下载的小程序源码怎么导入微信开发者工具呢? 1、打开已经安装的微信官方开发者工具,登录。 2、选择“无AppID”,随意取个项目名称,然后点击“选择”找到本地电脑下载的demo文件夹。(如果提前注册好了...
  • 等着把代码从微信开发者工具导进去就好了 2、开发者工具初始化本地仓库 打开微信开发者工具想要共同开发的那个项目,点击版本管理,点击弹出的框中的确定,就可以初始化完毕了。 3、连接gitee仓库和微信开发者工具 ...
  • 微信Web开发者工具,可用于微信小程序,微信公众号的开发
  • 如何解决微信开发者工具新建项目只生成project.config.json 最近开始学习微信小程序的开发,在刚开始学习的时候,使用微信开发者工具,构建项目目录结构,只生成project.config.json文件,让人一头雾水,还没开始,...
  • HBuilder运行到微信开发者工具步骤以及多种报错 **提示:**本人建议如果开发类为小程序,最好使用原生的开发者工具开发。因为现在微信小程序虽然支持有外部运行转入,但是会出现各种坑。而且你最终的发布还是要转...
  • 微信开发者工具编译后模拟器没反应,白屏 最近又用到了微信开发者工具,所有流程走下来,发现编译的时候,编辑器没有反应,一直白屏;还经常弹出窗口显示:重启项目时间过久巴拉巴拉巴拉; 解决 点击开发工具头部...
  • 当前系统代理不是安全代理是否信任的解决办法: ...我试过了上面所有的方法,重装软件无数遍,甚至修改了源码的js文件,防火墙安全卫士全部卸载,无数遍的修改注册表重启,都无法解决问题,如果你也是这样,那恭喜
  • linux安装微信开发者工具

    千次阅读 2019-11-07 10:03:59
    在linux下开发微信小程序,发现用虚拟机执行widnows然后运行微信开发者工具太难用了,每次改完js文件,需要先关闭掉开发者工具中的项目再重新打开并编译,才能正常编译,一次编译就要近1分钟,太痛苦了,网上有许多...
  • 微信开发者工具与GitHub

    千次阅读 2018-10-18 21:00:08
    我们都知道在最近的微信开发者工具中加入了版本控制的功能,如下图所示。 那么说到版本控制可能我们都会马上想起Github,
  • 1,创建一个空的GitHub仓库,不要任何文件和不要创建任何分支,后面会从微信开发工具统一导入。(只用填个name,其他不勾选,勾选了会自己创建master分支,这里不用创建分支,如果还是勾选了,后面会讲怎么把微信...
  •    今天开始学习uni-app时用到了HBuilderX ,新建项目之后发现运行小程序模拟器-微信开发者工具时,无法打开微信开发者工具,你会发现它报错了。经过多次百度查找下,我找到了这个方法,然后总结出来供大家一起...
  • 摘要:本文通过获取微信开发者工具安装路径、调用shelljs执行vue-cli编译命令、fs和path组合来读取编译后的目录、动态修改AppId和title这四个方面入手,一步步带领看官制作一个自动打开微信开发者工具的小插件,完美...
  • 方法 ... Download ZIP 解压,找到dist文件夹,在./weui-wxss-master/dist/ 打开“微信开发者工具”,选择“小程序” > “导入项目” > 名称随意,目录选择刚才的dist文件夹, AppID处填写“测...
  • electron 实现 微信开发者工具 devTools

    千次阅读 2018-12-14 01:03:58
    客户端 [类似微信开发者工具公众号模式] :采用 electronjs 构建跨平台应用。集成浏览器内核 & 客户端插件,构建基本的模拟运行环境!服务:采用扫码验证之后,自动构建一个本地或者公网 服务 。客户端临时访问...
  • 从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树;既然最终是通过css来绘制ui布局,我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,777
精华内容 13,910
关键字:

微信开发者工具源码