微信开发者工具个人登录

2016-12-14 18:00:59 Harryword 阅读数 6923



                                                                             格式调整                                                                            
  Ctrl+S:保存文件
  Ctrl+[, Ctrl+]:代码行缩进
  Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  Shift+Alt+F:代码格式化
  Alt+Up,Alt+Down:上下移动一行
  Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  Ctrl+Shift+Enter:在当前行上方插入一行
                                                                             光标操作                                                                            

     Ctrl+End:移动到文件结尾

  Ctrl+Home:移动到文件开头
  Ctrl+i:选中当前行
  Shift+End:选择从光标到行尾
  Shift+Home:选择从行首到光标处
  Ctrl+Shift+L:选中所有匹配
  Ctrl+D:选中匹配
  Ctrl+U:光标回退

                                                                             界面操作                                                                             

- Ctrl + \:隐藏侧边栏 
- Ctrl + m: 打开或者隐藏模拟器

                                         个人操作反馈(一直更新反应大家的心声                                         

- Tab:像eclipse 一样在引号中间用 Tab键跳出引号后边;

 -ctrl +J 像sublime 一样可以压缩代码到一行(如果有这个简直是太棒了);


还有就是界面为什么每次只能打开一个项目,多个项目同时打开不行吗?

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

上一篇文章中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文件夹下的页面文件,可以发现

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

2019-08-28 14:15:00 bangyang7328 阅读数 326

 打开微信开发者工具 创建第一个小程序

  • 步骤:

    • 打开微信开发者工具

    • 使用微信扫码登录

    • 点击小程序-创建小程序

      • 项目名

      • 项目路径

      • appid

      • 不使用云服务器

      • 语言: javascript

 截图如下:

 

微信开发者开发工具的组成

  • 菜单栏

  • 工具栏

    • 预览

      • 描述二维码

      • 自动预览

    • 切后台

  • 模拟器

  • 编译器

  • 调试器

 目录结构:

    

 

1.项目结构

  • 对比:

    • web页面:

      • 技术栈:

        • html

          • 从语义化的角度来描述页面结构

        • css

          • 从审美的角度来美化页面

        • js

          • 从交互的角度来提升用户体验

    • 小程序页面

      • 技术栈:

        • wxml

          • 描述微信页面的结构

        • wxss

          • 描述微信页面的样式

        • js

          • 书写微信的逻辑代码

        • json

          • 配置页面的相关信息

  • 组成

    • pages:管理当前小程序中所有的页面

      • index

        • index.wml

        • index.js

          • 注意点:

            • 所有的代码都是写在

              Page({
               
              })
        • index.wxss

        • index.json

          • 注意点:

            • 如果没有内容,必须添加一个空对象

    • app.json:注册小程序中的页面

  • 小技巧
    • 快速创建一个页面

      • 在 app.json 中的 pages 下添加一个路径,直接保存,可以自动生成对应的页面

    • 设置项目的默认首页

      • 在 app.json 中的 pages 将路径移到第一个元素中










转载于:https://www.cnblogs.com/KoBe-bk/p/11423765.html

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

2016-10-27 16:45:22 xiaoyezihanghui 阅读数 5378


释: 我是订阅号,申请的微信开发测试账号,操作授权登录


1.  下载web开发工具


2.  在公众号列表中, 开发者工具-》web开发工具-> 绑定开发者账号 -》输入你的微信号(微信号需关注公众号才可绑定),邀请绑定在微信客户端确认邀请即可


3.  在测试管理账号中, 网页授权获取用户基本信息  接口,点击修改  填充(授权回调页面域名),沙盒测试环境不限ip和域名,我填充的ip ( 注释: ip填充只需 如192.168.0.1:port,前缀不需要http,此坑已踩)


4.  授权链接 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx58caa75dbeb054aa&redirect_uri=http://192.168.0.1:8014/wechat_login&response_type=code&scope=snsapi_userinfo&state=1   回调按照自己的需求更改即可