微信开发者工具里页面刷新两次

2016-05-05 10:23:29 u013022210 阅读数 8848

1.在开发页面中插入以下代码即可

<p><a style=" display:inline-block;width: 4rem; height: 2rem; border: 1px solid #006600;" href="javascript:window.location.reload()">刷新</a></p>

2019-04-09 18:46:42 xiaolin9902 阅读数 691

今天在调试一个微信公众号的项目,用微信开发者工具做调试。有一个页面我一点击刷新,后台就会断点两次。有什么重定向的地方我不知道么?于是去掉微信浏览器的限制,直接将地址拷贝到chrome里面,不会重复请求。然后又改用菜单里面的刷新,也没有重复请求。

看来是微信开发者工具的bug,用菜单里面的刷新吧。

2020-04-19 14:02:25 xiao297328 阅读数 501

个人资源与分享网站: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`中相同的选择器。

2020-05-06 03:05:08 not_so_bad 阅读数 416

对于微信的代码管理工具一头雾水,用了一两个小时来了解,我真是太菜了

更基础一点的可以点击参考这个链接

接下来是我对于版本管理页面的理解

1.下面是点击微信开发者工具后的界面

2.首先,先来了解本地分支。

带有HEAD标签在后面的master存储我的代码的现有版本,或者这里称之为标准版本。开始进入版本管理工具时会有个提示上传代码的按钮,点击后最开始的标准版本就是一开始上传的代码。点击master后右边出现了一个列表,如果只是刚开始什么都没有修改的话,我们只会看到一行信息,就是下图中有“initial Commot”的那行数据。下图中有三行数据的原因是我提交了两次修改,每次修改都会增添一条信息,所以我一共有三条信息。但是master里面保存的是最后一次修改的,分支代码的保存也差不多。关于提交修改的方法在下面会提到的工作区中。

3.再看远程的代码管理仓库。这是之前设置过的远程代码仓库里面的项目。

4.接下来看工作空间

第一项工作区。当在微信开发者工具中修改了某些部分并保存的时候,工作区就会有消息提醒代码有修改。修改的对照是刚才提过的有HEAD标签的master。如果现在保存的代码和master不一样了,工作区就会在右边的列表列出修改过的地方。(修改显示是在更右边的文件里,红色区域表示是删除的东西,绿色区域表示增加的东西)。然后可以选择合适的修改在前面小框内打勾然后在下面写好备注就可以提交到master里了。

第二项贮藏。贮藏是不知已有修改是否可行,但又不想直接撤销时,先暂时存放一下。点击工具栏那里的“贮藏”就可以贮藏全部修改(目测好像不可以选定贮藏)。要恢复到工作区就点击工作空间的贮藏,再右击右面列表需要恢复的选项,然后应用贮藏就可以了。

第三项历史,就是修改历史总览。第四项设置没怎么看。

5.工具栏(我也不知道那里算不算工具栏)

左一刷新。按钮如其名。

左二推送,可以上传本地分支里面的某一项到git仓库。

左三抓取,抓取就是下载这一项最新的记录,但不会合并到master(后面会提到合并概念)。

左四拉取,拉取就是下载这一项最新的记录,但会合并到master。

右四贮藏,上面提过了,就是暂时不修改但保存修改。

右三应用贮藏,就是把贮藏的项恢复到工作区。

右二分支,对选定的本地分支项创建一个复制品。

右一合并,就是等于将选定的项作为有head标签的master。但如果是master的历史记录里有选定的项,master是不会变的。

2016-10-21 10:32:26 zhouwu0716 阅读数 1834
微信小程序开发者工具0.10.101100版本为当前最新版,包含windows64、windows64、mac三个版本。



更新日志(0.10.101100)


基础功能
A 增加 <video/> Android 添加了默认的控件
A 增加 模块化中可使用 exports 对外暴露接口
A 增加 模块化中 require 可不写 .js 后缀
F 修复 <swiper/> 滑动灵敏度
F 修复 <toast/> 中图标位置偏上,没有居中的问题
F 修复 <view/> 标签 hidden 属性失效的问题
F 修复 <input/> iOS10 下首次输入不显示的问题
F 修复 <button/> type="mini" 的问题
F 修复 <button/> 出现 loading 时,loading和文字对齐的问题
F 修复 <canvas/> drawImage 图片路径不正确的问题
F 修复 Page 中 data 之外的数据无法被重置的问题
F 修复 大小写导致的 wx.request 的 header 参数属性被重复设置的问题
F 修复 app.js 中无法使用 require 的问题
R 移除 <switch/> 组件多余点击态
R 移除 <view/> 标签 inline 属性
R 移除 <page/> 标签的 height 100% 的默认样式


开发者工具基础功能
A 增加 ES6 到 ES5 的转换,默认开启,开发者可以在项目中主动关闭
A 增加提交代码时候可选压缩代码,默认关闭,开发者可以在项目中主动开启
A 增加 wx.uploadFile 和 wx.downloadFile 调试支持
A 增加下拉刷新的调试支持
A 增加 <form/> reportSubmit 模式模拟返回 formId 调试支持
A 增加 <video/> 添加了滑动进度条的功能
A 增加 <picker/> mode=time mode=date
F 修复打开地图导致错误的问题
F 修复 <map/> 组件不显示的问题
F 修复 <canvas/> 中 drawImage 闪烁的问题
F 修复 json 中 navigationBarTextStyle 缺省值设置出错的问题
F 修复 <picker/> 在表单提交事件中 value 为空的问题
F 修复背景音乐停止时会触发一次 wx.onBackgroundAudioPause 的问题
F 修复wx.request 超时会触发两次 fail 和 complete 回调的问题
F 修复小屏幕下开发者工具无法拖动到底部的问题
F 修复 wx.setStorage 没有限制大小的问题
F 修复某些情况下修改了代码文件但工具没有更新的问题


编辑模块
A 增加侧边栏可以拖拽位置保存
A 增加快捷键 ctrl + \ or command + \ 隐藏侧边栏
A 增加文件页卡可以拖动排序的功能
F 修复 wx.setNavitionBarTitle 提示错误的问题
F 修复某些情况下文件修改不生效的问题


微信小程序开发者文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html


为了方便大家交流学习,我们建立了自己的微QQ交流群和微信公众号,QQ交流群用于微信小程序在线交流。微信公众号用于及时的给本培训课程的爱好者发布第一手资料

QQ交流群:594051981

微信公众号: