• 最近在写小程序,实在被这微信开发者工具搞懵了,时而打不开,网上找了超多的方法来解决,下面把我踩的坑给总结出来 方法1:软件重新安装,系统重启 当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是...

    最近在写小程序,实在被这微信开发者工具搞懵了,时而打不开,网上找了超多的方法来解决,下面把我踩的坑给总结出来
    方法1:软件重新安装,系统重启
    当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,要不就关机重启电脑,这种方法特别具有使用性,是大多数程序员必备小技巧。
    但这种方法成功的几率看天。

    方法2: win7下,用管理员或者兼容方式运行
    这时候我们在图标出点击右键你的微信Web开发工具,选择属性。在属性、兼容性中,点击兼容模式到兼容性选项卡(我的是win7的系统),并选着以管理员身份运行此程序。点击应用,并确认更改。
    我试了一下也没什么卵用
    方法3: 重新安装到一个新的目录
    重装 “微信web开发者工具” ,要把安装目录修改为非上次安装的目录(安装在一个新目录下,不受原有文件影响,本人试过安装在原有的目录下,安装过程中会报与原有文件冲突,而且安装好后也无法启动)。
    这种方法挺麻烦的,而且也有不成功的可能。
    方法4:最简单暴力的方法,32位
    软件重装,系统重启,管理员运行,更换目录,表示均无效的时候,告诉你们一个最简单粗暴的办法,好了要过来谢谢我哦,赶紧去下个32位的!别犹豫了,对!就是32位的,见证奇迹…
    因为我的系统是windows7 64位的,所以,我下载的小程序也是64位,后来发现,其实不对,腾讯的版本似乎错了,在windows 7 的某些64位版本,要 下的是微信小程序的32位版本。
    刚开始看到这个方法的时候我带着嗤之以鼻的态度试一下,没想到卧槽,居然可以,实在震惊我的三观。

    不要问我为什么,我也不知道,就是这么简单粗暴,成功解决你的问题后,别忘了回来点个赞啊~~

    展开全文
  • 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示:

    个人资源与分享网站:http://xiaocaoshare.com/

    1.微信开发者工具自行到网上下载即可

    2.打开微信开发者工具,如图所示:

    点击创建后,如下图所示:

    #### 项目结构

    ```
    └─ empty-folder/ ·································· 项目所在目录
       ├─ pages/ ······································ 页面目录
       │  ├─ index/ ··································· index页面
       │  │  ├─ index.js ······························ index页面逻辑
       │  │  ├─ index.wxml ···························· index页面结构
       │  │  └─ index.wxss ···························· index页面样式
       │  └─ logs/ ···································· logs页面
       │     ├─ logs.js ······························· logs页面逻辑
       │     ├─ logs.wxml ····························· logs页面结构
       │     └─ logs.wxss ····························· logs页面样式
       ├─ utils/ ······································ 公共脚本目录
       │  └─ util.js ·································· 工具脚本
       ├─ app.js ······································ 应用程序逻辑
       ├─ app.json ···································· 应用程序配置
       └─ app.wxss ···································· 应用程序公共样式
    ```

    #### 页面结构

    每个页面组件也分为四个文件组成:

    ##### [page-name].js

    页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理

    ##### [page-name].json

    设置当前页面工作时的window的配置,此处会覆盖app.json中的window设置,也就是说只可以设置window中设置的属性

    ##### [page-name].wxml

    > wxml指的是Wei Xin Markup Language

    用于定义页面中元素结构的,语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法

    ##### [page-name].wxss

    > wxml指的是Wei Xin Style Sheet

    用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)

    ### 项目配置

    > 相关链接:
    > - [官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)
    > - [生成配置文件](https://weapptool.com/start.html)

    小程序中的配置文件分为两种:

    - 全局配置文件,根目录下的app.json
    - 页面配置文件,每个页面目录下的[page-name].json

    ##### app.json

    项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)

    ```javascript
    {
      // 当前程序是由哪些页面组成的(第一项默认为初始页面)
      // 所有使用到的组件或页面都必须在此体现
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
      "pages": [ ... ],
      // 应用程序窗口设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
      "window": { ... },
      // 应用导航栏设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
      "tabBar": { ... },
      // 网络超时设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
      "networkTimeout": {},
      // 是否在控制台输出调试信息
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
      "debug": true
    }
    ```

    ##### [page-name].json

    用于指定特定页面工作时,window的设置:

    ```javascript
    {
      // 导航条背景色
      "navigationBarBackgroundColor": "#35495e",
      // 导航条前景色(只能是white/black)
      "navigationBarTextStyle": "white",
      // 导航条文本
      "navigationBarTitleText": "电影 « 豆瓣",
      // 窗口背景颜色
      "backgroundColor": "#fff",
      // 窗口前景色
      "backgroundTextStyle": "dark",
      // 是否开启下拉刷新
      "enablePullDownRefresh": true
    }
    ```

    ### 逻辑层分析

    #### 应用程序逻辑`app.js`

    `app.js`作为项目主入口文件,用于创建应用程序对象

    ```javascript
    // App函数是一个全局函数,用于创建应用程序对象
    App({
      // ========== 全局数据对象(可以整个应用程序共享) ==========
      globalData: { ... },

      // ========== 应用程序全局方法 ==========
      method1 (p1, p2) { ... },
      method2 (p1, p2) { ... },

      // ========== 生命周期方法 ==========
      // 应用程序启动时触发一次
      onLaunch () { ... },

      // 当应用程序进入前台显示状态时触发
      onShow () { ... },

      // 当应用程序进入后台状态时触发
      onHide () { ... }
    })
    ```

    也就是说,当应用程序启动时会自动执行项目目录下的`app.js`文件。

    在`app.js`中通过调用全局`App([option])`方法创建一个应用程序实例。

    其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。

    属性 | 类型 | 描述 | 触发时机
    -----|------|------|---------
    onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
    onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow
    onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide

    也可以定义任意其他的对象成员(例如:方法和属性),这些成员可以在内部直接使用,或者外部通过获取`app`对象调用:

    属性 | 类型 | 描述
    -----|------|------
    其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,一般用于存放业务逻辑配置,比如:API地址

    app.js

    ```javascript
    App({
      data1: '123',
      data2: { message: 'hello world' },
      api: {
        list: 'https://github.com/zce/',
        detail: 'https://github.com/zce/',
      },
      foo () {
        return 'bar'
      }
    })
    ```

    other.js

    ```javascript
    // getApp 也是全局函数,可以在任意地方调用,用于获取全局应用程序实例对象
    var app = getApp()
    console.log(app.data1)
    console.log(app.data2)
    console.log(app.foo())
    ```


    #### 页面逻辑`[page-name].js`

    `[page-name].js`是一个页面的重要组成部分,用于创建页面对象

    ```javascript
    // 获取全局应用程序对象
    const app = getApp()

    // Page也是一个全局函数,用来创建页面对象
    Page({
      // ========== 页面数据对象(可以暴露到视图中,完成数据绑定) ==========
      data: { ... },

      // ========== 页面方法(可以用于抽象一些公共的行为,例如加载数据,也可以用于定义事件处理函数) ==========
      method1 (p1, p2) { ... },
      method2 (p1, p2) { ... },

      // ========== 生命周期方法 ==========
      // 页面加载触发
      onLoad () { ... }

      ...
    })
    ```

    在应用程序执行到当前页面时,会执行当前页面下对应的`[page-name].js`文件。
    在`[page-name].js`中通过调用全局`Page([option])`方法创建一个页面实例。

    ##### `Page([option])`方法`[option]`参数说明

    属性 | 类型 | 描述
    ---- | ---- | ----
    data | Object | 页面的初始数据
    onLoad | Function | 生命周期函数--监听页面加载
    onReady | Function | 生命周期函数--监听页面初次渲染完成
    onShow | Function | 生命周期函数--监听页面显示
    onHide | Function | 生命周期函数--监听页面隐藏
    onUnload | Function | 生命周期函数--监听页面卸载
    onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作
    其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问


    ### 视图层分析

    #### `[page-name].wxml`页面结构

    `WXML(WeiXin Markup Language)`是`MINA框架`设计的一套标签语言,基于`XML`。

    结合一些基础组件、事件系统、模板数据绑定,可以构建出页面的结构。

    简单来说:wxml ≈ xml + 事件系统 + 模板引擎

    例如:

    ```javascript
    // js
    Page({
      data: {
        todos: [
          { text: 'JavaScript', completed: false },
          { text: 'JavaScript+', completed: false },
          { text: 'JavaScript++', completed: false }
        ]
      },
      completed (e) { ... }
    })
    ```

    ```xml
    <!-- wxml -->
    <view>
      <view wx:for="{{ todos }}">
        <block wx:if="{{ !item.completed }}">
          <text>{{ item.text }}</text>
          <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
        </block>
      </view>
    </view>
    ```


    #### `[page-name].wxss`页面样式

    `WXSS(WeiXin Style Sheets)`是`MINA框架`设计的一套标签语言,基于`XML`。

    `WXSS`用来决定了在`WXML`中定义的组件应该怎么显示。

    为了适应广大的前端开发者,我们的`WXSS`具有`CSS`大部分特性。 同时为了更适合开发微信小程序,我们对`CSS`进行了扩充以及修改。

    与`CSS`相比我们扩展的特性有:

    - 尺寸单位
    - 样式导入(CSS也有)

    ##### 尺寸单位

    rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

    rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

    设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) | rem换算rpx (750/20)
    ---- | ------------------------ | ------------------------ | ------------------------
    iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | 1rem = 37.5rpx
    iPhone6 | 1rpx = 0.5px | 1px = 2rpx | 1rem = 37.5rpx
    iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx | 1rem = 37.5rpx

    > - **建议:** 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
    > - **注意:** 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

    ##### 样式导入

    使用`@import`语句可以导入外联样式表,`@import`后跟需要导入的外联样式表的相对路径,用`;`表示语句结束。

    ```css
    @import "common.wxss";
    text {
      background-color: #ff0;
    }
    ```

    ##### 选择器

    目前只支持如下选择器

    选择器 | 样例 | 样例描述
    ------ | ---- | --------
    .class | .intro | 选择所有拥有 class="intro" 的组件
    #id | #firstname | 选择拥有 id="firstname" 的组件
    element | view | 选择所有 view 组件
    element, element | view | checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
    ::after | view::after | 在 view 组件后边插入内容
    ::before | view::before | 在 view 组件前边插入内容

    ##### 全局样式与局部样式

    定义在`app.wxss`中的样式为全局样式,作用于每一个页面。在`[page-name].wxss`文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖`app.wxss`中相同的选择器。

    展开全文
  • 一年一度的微信小程序开发大赛即将拉开帷幕,在使用微信开发者工具进行多人开发时,代码管理就成了比较棘手的问题。好在,微信开发者工具中集成了Git工具,只需链接到远程仓库,即可轻松协作。 #使用方法 ##安装Git ...

    #写在前面

    一年一度的微信小程序开发大赛即将拉开帷幕,在使用微信开发者工具进行多人开发时,代码管理就成了比较棘手的问题。好在,微信开发者工具中集成了Git工具,只需链接到远程仓库,即可轻松协作。

    #使用方法

    ##安装Git

    要使用任何一款IDE或文本编辑器所集成的Git,首先,你得安装Git。(下载地址

    ##配置用户名和邮箱

    git config --global user.name "username"
    git config --global user.email "eamil@email.com"
    

    这里的用户名和邮箱填写你项目所在平台(Github或Gitee等)的用户名和邮箱即可。

    ##配置Windows凭据

    打开控制面板->用户账户->凭据管理器->Windows凭据
    凭据
    若下方的普通凭据中没有Github或Gitee,那么点击添加普通凭据
    凭据
    以GitHub为例,在地址和网址中输入git:https://github.com,用户名和密码填写GitHub的登录用户名和密码。

    ##生成SSH Key

    ssh-keygen -t rsa -C "email@email.com"
    

    生成成功后,在bash控制台中会看到Your identification has been saved in ...。进入对应目录,用记事本打开id_rsa.pub,得到ssh key公钥,复制。

    ##配置SSH Key

    打开GitHub,点击头像展开小三角,点击settings,选择SSH and GPG keys,点击New SSH key,将之前复制的公钥填至对应的key一栏即可。
    SSH

    ##建立远程仓库

    在Github中建立远程仓库,若已有仓库(或者已经在团队中),则进入团队的仓库。

    ##克隆仓库到本地

    点击绿色的克隆按钮,注意克隆方式是Clone with HTTPS,点击小图标进行复制。
    克隆
    打开本地要放项目的文件夹,右键点击空白处,选择Git Bash Here,输入如下命令:

    git clone 这里是刚刚复制的地址
    

    注意:在克隆时,会自动创建一个与远程仓库同名的文件夹来包裹仓库中所有的文件,所以克隆之前如果不必要,可以不建立新的文件夹。

    ##在微信开发者工具中配置Git

    1 配置用户名和邮箱

    点击开发者工具右上角的版本管理,在弹出界面中点设置,在右侧的红框区域点编辑,来配置用户名和邮箱。
    版本管理
    GIT

    2 配置密码

    在网络和认证界面选择认证方式如图,填写Github登录的用户名和密码。
    密码

    ##推送代码

    配置完成后,我们修改一下readme.md文件,来测试是否成功配置。
    配置
    更改文件内容并保存后,左侧的文件名后面会出现一个M,说明配置已经成功。以后每次完成更改,都会出现类似的标识。
    点击右上角版本管理,勾选发生更改的文件前的复选框,在下方的标题处填写本次更改的摘要,详细信息选填。填写完成后,点击下方的推送按钮即可。

    注意: 每次推送前先点击左上角的 拉取 按钮,来同步队友的更改。尽量避免使用强制推送!容易造成代码因覆盖而丢失。

    版本管理

    #后记

    使用Git管理代码的项目做了几个,这次把使用方法整理出来,以便后面再次用到时查阅。

    展开全文
  • 微信开发者工具代码编辑区消失,写的代码显示不了时: 在编辑器控制台输入:openVendor 回车  会打开一个文件夹:C:\Users\Administrator\AppData\Local\微信web开发者工具\User Data\WeappVendor 清除里面的...

    当微信开发者工具代码编辑区消失,写的代码显示不了时:

    在编辑器控制台输入:openVendor 回车

               会打开一个文件夹:C:\Users\Administrator\AppData\Local\微信web开发者工具\User Data\WeappVendor

    清除里面的wcsc wcsc.exe ,再重启编辑器,就可以了。

     

     

     

     

    展开全文
  • 1.运用命令行安装依赖 npm i 2.进入微信开发者工具点击工具选择构建npm,刷新页面就行.

    1.运用命令行安装依赖 npm i

    2.进入微信开发者工具点击工具选择构建npm,刷新页面就行.

    展开全文
  • [解决方案]微信开发者工具中的代码模块不显示 1.在控制台输入openVendor 2.在弹出的文件夹里,清除wcsc wcsc.exe 3.重启开发者工具 4.如果失效,重启电脑,再重复上述操作 ...
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 微信web开发者工具(小程序开发工程),打开后卡住显示黑色或白色窗口如下图解决办法是,右击微信web开发者工具.exe文件,修改兼容性,改为windows7,如图:应用确定后,再次启动就可以了。...
  • 关于微信web开发者工具模拟器出现空白问题,代码没错误,在模拟器中无法显示UI界面。 有博主总结点击开发者工具的 “>>”–>详情–>上传代码时自动压缩混淆功能取消勾选。 经过我的调试,取消勾选后也...
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,...
  • 尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊。。。 相关教程: Egret微信小游戏教程 ...微信开发者工具 1.02.1803210 开发流程: 一. 注册微信小程序账号。 二. 下载安装...
  • 记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)。  原因:pc端微信浏览器不支持es6,而我的代码使用了 let 。  ...
  • 最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,...
  • 微信Web开发者工具使用移动调试以及inspect出现白屏 解决方案 1.首先你得下一个微信web开发者工具 (长这样的) 下载地址 : (下载0.7版本的因为1x新版本没有移动调试)...
  • 开发的时候在微信开发者工具中一直都是正常显示,但是在打包的时候,iconfont图标部分不能被打包,报错编译错误88,由于是第一次使用uni-app开发小程序,所以就想着那就先发布看看会不会缺图标,结果发布之后,打开...
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 本文为大家介绍一下微信小程序开发者工具版本管理的一些使用方法,结合了笔者的一些使用体验和官方使用文档,致力于方便大家理解使用该项功能。本文编写时笔者使用的开发者工具版本为Stable v1.02.1910120.使用本...
  • 原因:pc端微信浏览器不支持es6,而代码中使用了...1,h5微信页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白) - Alonge的博客 - CSDN博客https://blog.csdn.net/m0_3...
  • 最近开始学习上了微信小程序开发,网上找了一个教程来学习,结果刚开始学习就掉进了坑里。 在教程之中,新建了一个空白项目后,进去项目,根目录下新建了一个app.json文件,然后新建了一个pages目录,pages目录下...
1 2 3 4 5 ... 20
收藏数 1,620
精华内容 648