微信开发者工具修改文件夹名

2016-12-07 19:22:11 weixin_36185028 阅读数 12784

从9月份微信小程序横空出世到现在的将近三个月,虽然尚未全面开放,却已红透大半边天,网友们贡献的各种资源教程也喷涌而出。

最近刚刚学完JavaScript的基本知识,忍不住也开始尝试一下微信小程序开发,对于官方提供的微信web开发者工具也是信心十足,但是实际操作中还是遇到了一些坑,对于像我一样的一个初学者,比如在该工具中创建项目后,存放各个页面的文件夹默认为pages,但是想把它改成其他名字,结果会出现不同的问题,下面分享自己是如何爬这个坑的,懂得的大神请忽略。

首先,现在下来最新的开发工具微信web开发者工具v0.11.112301,打开新建一个快速启动项目test,稍微改一下页面内容,只保留logs页面,效果和文件树如下所示:


由于某种原因,现在我需要更改pages文件夹名称,当然app.json里面对应的页面路径也要同步更改。

1,先更改文件树文件夹名称为pagestest,移开鼠标焦点点击空白处(此处若不移开鼠标焦点直接保存结果不会改变),保存(会出现报错一次),再更改app.json中的页面路径为"pagestest/logs/logs" 保存,显示效果正常为;

2,先更改app.json中的页面路径为"pagestest /logs/logs" 保存,页面显示pagestest/logs/logs.wxml,再更改文件树种的文件夹名称为pagestest保存,此时pagestest文件夹中又出现了另外一个文件夹pages,而且显示仍然是pagestest/logs/logs.wxml,而这个pages文件夹中也有一个logs文件夹,与原文件夹内容一样。

删除这个后来生成的pages文件夹,保存,此时的页面才显示出Hello World。有时删除pages后还不能正常显示,需要进入logs的wxml页面置入鼠标焦点,无需改变内容,保存一下即可。

另外,自己在尝试时也遇到过其他的情况:

1.生成的多余的页面文件夹也可能在于app.js同一层的位置;

2.更改后页面内容还是不能正常显示,这时进入wxml文件看一下内容,发现原本的文件内容变成了路径,所以删除文件后来生成的文件之前先看一下页面内容是否还存在。

 

综上所述,微信官方的开发者工具在用户体验上还是存在这个欠缺的,期待官方后面版本的更加人性化,

对于出现诸如以上问题,除了按方法1更改之外,当然一次性建好页面文件夹名称不再更改是最好的办法,如何无法确定后面是否需要更改,则可以用第三方编辑器比如sublime text进行代码变,可以在官方开发工具中查看效果,从而避免出现以上问题。

2019-10-08 11:33:21 weixin_43042683 阅读数 129

声明:首先我的文章,是问题探讨,而不是问题解决,因为我真的也不知道怎么解决。

前言:

就在2019年10月6日下午,我安装了微信开发者工具,初次安装可以正常使用,但我这个人脑缺,由于初次接触微信开发者工具,想做个微信小程序,我没事打开了其中的公众号网页的制作随意看看,却不知道怎么返回首页,就索性卸载了,对,卸载了。。。本来想卸载重装就完事了,但万万没想到,之后我就经历了两天的微信开发者工具无法打开登陆的苦恼,还被同学嘲笑她一分钟安好了,我却搞了两天。这。。。我也不想啊,嘤嘤嘤。

问题解决方法探讨:

我是在微信开发社区中(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)下载的,首先我可以肯定,这个下载安装包肯定没问题,因为我第一次安装成功使用就是在这里下载的。我第一次是安装在了D盘,新建的文件夹“微信开发工具”,之后我重新安装也是在这个文件夹,但安装无法使用。然后我就在CSDN上各个大佬的博客找解决方法(其实我也想知道是什么原因,但他们都没说哎)。找到的方法如下:

方法一:重新安装或电脑重启。

方法二在任务管理器上关闭所有有关微信开发者工具的进程/任务,重新打开微信开发者工具。

方法三:右键你的微信Web开发工具,选择属性。在属性、兼容性中,点击兼容模式到兼容性选项卡(我的是win10的系统),并选着以管理员身份运行此程序。点击应用,并确认更改。

方法四:重装 “微信web开发者工具” ,要把安装目录修改为非上次安装的目录(安装在一个新目录下,不受原有文件影响)

方法五:下载安装32位微信开发者工具。

方法六:把微信开发者工具自动生成的桌面快捷方式删除,找到微信开发者工具安装目录下的wechatdevtools.exe(微信开发者工具)文件,将它发送到桌面快捷方式,重新打开。

我的方法:是把微信开发者工具重装在了F盘,也就是我把安装地址换成不同盘符了。

总结:

对于不同方法,有的人有不同反应。其中方法二,方法五,反应解决的最多。当然像方法一、方法三、方法四的也有一部分人反应问题得到解决。至于方法六和我这种方法,感觉有点奇葩哈。不过可以试试,祝你好运。

对于我现在安装好了,赶上微信小程序注册维修,无法申请,也是服了。摸摸我的小心肝。。。

2019-06-02 21:01:55 u014650759 阅读数 672

上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小程序。

1.机型选择:小程序以IPhone7的屏幕尺寸为设计标准,让UI以IPhone7屏幕尺寸来切图。
2.预览界面:写好视图布局后点击编译,视图界面刷新显示
3.编译:代码更改后刷新编译。
4.预览界面:查看编译后的效果,仅限于登录开发工具的开发者本人可以扫码并预览,其他人无法扫码预览。
5.真机调试:扫描生成的二维码,真机进行调试。
6.资源文件:对应项目的文件目录,一般可以在这里进行断点调试。
7.数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
8.视图代码:标组件以子父层级结构呈现,方便查看调试。
9.9-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFile和downloadFile域名。注意:域名小程序要求必须是https
10.项目信息:展示项目所包含的文件,以及进行相关操作
11.代码区域:进行项目下具体文件的代码编辑

接下来,通过上面打开的项目,可以看到小程序框架以及目录结构,下面开始对代码架构目录做简要介绍:app.js、app.json、app.wxss

  1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。例如上面的界面展示了该代码文件中,数据存储操作,跳转登录页面,以及获取用户信息。
  2. ​app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序的窗口、背景色,配置导航条样式,配置默认标题,添加新的页面后也要在此文件中添加新页面申明。注意该文件不可添加任何注释。
  3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。其格式和写法,类似于css,不过是css的一个子集,也就是说有些css写法是不支持的。
  4. project.config.json是小程序的工具配置文件,可以做一些个性化配置,例如界面颜色、编译配置等等。在工具上做的任何配置都会写入到这个文件,当重新安装时,只要载入同一个项目的代码包,开发者工具就会自动配置,通常无需修改。
  5. sitemap.json是用来配置小程序及其页面是否允许被微信索引,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中,通常无需修改。

这里上面讲解了小程序的项目文件,而小程序的交互是通过页面来进行的,所以同时我们也需要知道,小程序的页面组成,查看page文件夹下的页面文件,可以发现

总结,至此,我们已经大概知道了小程序的开发工具内部区域功能布局,及其项目结构文件介绍。

2018-09-01 18:50:22 qq934235475 阅读数 17984

写在之前:

由于业务扩展,公司需要开发小程序,之前在做RN开发,才结束,就得边学边维护。

但是,有东西学,当然是好的,正所谓工欲善其事必先利其器,开发一个新项目之前,版本管理工具可是第一位。

进入微信开发工具后,发现需要使用新的版本工具 - “工蜂”,在这之前公司用的 GitLab 搭建的服务器,本以为有什么不同,但是忘记了是 TX 的!!!咳咳,不难发现,这是微信开发工具有意推广 TX 的工蜂,其实也大同小异。

题外,工蜂?真的把我们程序猿当做蜜蜂了啊?啊,喂!

注:阅读之前,需要有git的相关操作以及机器安装Git。(补课传送门:https://git-scm.com/book/zh/v2


机器环境:

  1. Mac 10.13.3
  2. Git version 2.10.1

步骤说明:

  1. 需要登录工蜂平台(当蜜蜂传送门:https://git.code.tencent.com/users/sign_in),注册账户。
  2. 配置账户信息。
  3. 创建项目及分支。
  4. 微信开发工具配置。
  5. 拉取项目,提交合并测试。

以上五步,第一步进入自行注册即可,剩下四步。那么,废话不多说,let's go.


二,配置账户信息

登录后,点击【个人设置】配置好用户名及昵称后,在【密码设置】里配置好密码。

 


三,创建项目及分支

 

点击【返回个人中心】

 

 

右上角【创建项目】

 

 

在【新建项目】时,可以对项目名称进行命名,路径也就是项目名称啦。

 

这样,我们的项目版本库就创建好啦,当然,有的同学会问了,我的版本库是空的,那我下载什么?根据下面的提示,进入项目文件夹,比如使用微信开发工具新建了一个小程序的Project,那么进入该文件夹下,根据提示【创建一个新的版本库】进行操作即可。

四,微信开发工具配置。

使用微信开发工具打开项目,注意版本。

点击版本管理。

以下是基本的 git 操作以及分支的展示。【确实界面很简洁,看起来很舒服,但是,换成中文,竟然有一点不适应。】

接下来,点击【设置】->【网络和认证】,对账户进行配置,也就是刚才工蜂上面填写的。

配置完成啦。

注:如果需从git上拉取别的新项目,需使用git命令拉取项目到文件夹之后,再使用微信开发工具打开进行如上操作即可。

git clone "url"

五,拉取项目,提交合并测试。

点击拉取,选择分支以及合并方式即可拉取该分支下的更新。

出现这个小勾,则表示拉取成功啦,在【历史】一栏中可以查看。

 


附加步骤:

什么?为什么还会有附加步骤,说好的五步走呢?

哈哈哈哈,打不过我吧,啦啦啦啦啦啦啦啦~各位忘了,第一步不是注册账户吗,抵消抵消~

咳咳,言归正传,通常 Gitmaster 分支,是对外发布的主要稳定版本,也就是生产版本。所以,需要新建一个自己的分支对项目进行操作。

此外,需要一个 develop 分支来对大家开发的代码进行合并,之后在上线的时候,推送到 master 分支。

master 分支的 bug ,切一个新分支【命名为 master + 预计发布日期 如 master20181212 】出来进行修改,而新功能则在 develop 上继续开发。详细传送门:http://blog.jobbole.com/109466/)。

所以,我们现在需要新建一个自己的分支来供自己提交代码,上述大概的流程是:

提交并推送到【自己的分支】->合并推送到【 develop 分支】->合并推送到【 master 分支】


话不多说,开搞开搞。

点击【项目】,然后找到刚才初始化后的项目点击进入:

点击【分支】即可查看当前项目下拥有的分支

这里已经有了两个分支,一个是 master ,一个是我自己创建的分支,点击右上角【创建分支】,进行新分支创建。

输入新分支的名称,以及分支的来源(from)

创建好之后,在微信开发工具中进行相应操作。

点击【分支】即可新建一个本地分支

选择基于哪个分支创建,这里命名需和远程新建的一样

创建好之后,点击抓取

这样,我们本地有了新建的分支,远程也有了新建的分支。那么新建的分支提交并推送代码后,点击【合并】,比如我A分支提交推送后,本地检出(check out)master分支,然后合并本地的A分支,在点击推送。这样,远程的A和master分支都有了更新的代码,其他伙伴更新分支,即可下载到你提交的代码。


好了,就先写到这儿,可能说得有点快,有不详细获取错误的地方,欢迎指出。当然,有什么不明白也可以留言交流。


不知道我有没有写得通俗易懂,如果觉得哪步有疑惑,可以留言,欢迎指出不足。

下面是我自己搞的一个公众号,分享讨论交流技术~,也可以解答一些你遇到的问题,给我留言就行。

感谢 Thanks♪(・ω・)ノ。

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`中相同的选择器。