微信开发者工具中怎么引入背景图

2019-01-24 11:44:29 wenxingchen 阅读数 20027

由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

 

第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

 

第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

 

如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

 

办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

 

方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

 

如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

2020-03-06 17:18:53 yyws2039725 阅读数 392

由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

 

第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

 

第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

 

如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

 

办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

 

方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

 

如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

2019-02-27 13:53:24 weixin_34393428 阅读数 356

背景

微信小程序的测试发布在没有 CI/CD 等相关工具的情况下,存在着如下的问题:

  • 小程序开发助手中,同一个开发者只能显示一个开发版本
  • 测试同事找开发要二维码,效率较低
  • 本地生成的二维码会出现携带本地代码、未及时拉取分支其他改动等问题

为了避免如上问题的发生,采用微信小程序集成 Jenkins 的方案。
但是网上所有文档都是基于MacOS部署的,但是实际都是一样的东西。唯一不一样的就是在win10环境中使用批处理文件,还需要安装一些特定的软件:
win10下搭建Jenkins+微信开发者工具

wget,node,gitbash(可以不安装),微信web开发者工具,Jenkins

基础

在介绍实现方案之前,先来回顾一下常规的微信小程序发布流程。
win10下搭建Jenkins+微信开发者工具

从上面的流程图可以看出,微信小程序预览、上传都是需要在微信开发者工具中进行的,接下来了解一下微信开发者工具提供的上传方式。

微信开发者工具

除了图形化界面,微信开发者工具还提供了命令行与 HTTP 服务两种接口供外部调用,来进行登录、预览、上传等操作。

命令行调用

命令行工具所在位置:

macOS: <安装路径>/Contents/Resources/app.nw/bin/cli
Windows: <安装路径>/cli.bat

以 macOS 操作系统示例:

1、打开开发者工具:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

其中,/Applications/wechatwebdevtools.app/为安装路径。
win10下搭建Jenkins+微信开发者工具
2、登录:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

输入上面的命令行后,终端中打印出登录二维码,使用微信扫码登录。在微信端完成操作之后,会输出 login success,如下图所示:
win10下搭建Jenkins+微信开发者工具

HTTP 服务

HTTP 服务在工具启动后自动开启,每次开启 host 固定为 127.0.0.1,端口号并不固定。端口号在用户目录下记录,位置如下:

macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide
Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide

以 macOS 操作系统示例:

首先需要运行开发者工具,可以利用上面介绍的命令行方法打开微信开发者工具。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

这样就可以拿到微信开发者工具运行的端口号了,其中,/Users/zyy/ 为用户目录。

1、打开开发者工具:

# 打开工具
http://127.0.0.1:端口号/open
# 打开/刷新项目
http://127.0.0.1:端口号/open?projectpath=项目全路径

2、登录:

# 登录,返回图片格式的二维码
http://127.0.0.1:端口号/login
# 登录,取 base64 格式二维码
http://127.0.0.1:端口号/login?format=base64
# 登录,取 base64 格式二维码,并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3、预览:

# 预览路径为 /Users/username/demo 的项目,返回图片格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo

# 预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

# 预览路径为 /Users/username/demo 的项目,返回 base64 格式的二维码,并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

# 预览路径为 /Users/username/demo 的项目,返回图片格式的二维码,并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

win10下搭建Jenkins+微信开发者工具

开始部署准备阶段

1.安装wget,node,Jenkins,gitbash,微信开发者工具

node,Jenkins去官网下载msi文件即可安装便利
wget下载后解压到D盘根路径下即可
(所有需要使用到的东西最好不要放到当前用户触碰不到的目录,否则你会哭的很惨)

2.安装gitbash并且上传公钥到代码库
#
#
win10下搭建Jenkins+微信开发者工具

3.配置Jenkins服务权限和更改环境变量(最重要的一步

打开CMD->输入services.msc
#
#
win10下搭建Jenkins+微信开发者工具
找到Jenkins 右键->属性 ->登陆
#
#

win10下搭建Jenkins+微信开发者工具
#
重启生效
#

win10下搭建Jenkins+微信开发者工具
#
#
在Jenkins系统管理——全局安全配置页面,将标记格式器在下拉列表中修改为Safe HTML然后保存,这个修改是为了在build历史记录中能够直接显示二维码图片
win10下搭建Jenkins+微信开发者工具

JAVA_OPTS
-Dsun.jnu.encoding=UTF-8 -Dfile.encoding=UTF-8

LANG
zh.CH.UTF-8

设置环境变量后重启生效(也可以不配直接写绝对路径)

Jenkins插件安装

安装下列Jenkins插件后重启:

GIT plugin
Git Parameter:获取所有分支名,作为参数列表
SSH Credentials Plugin
Git Changelog:获取Git提交log
build-name-setter
description setter plugin:在build历史记录描述信息中增加二维码显示
PostBuildScript Plugin:编译完成后执行脚本
NodeJS Plugin:小程序构建需要,在更改提交状态时使用node技术
AnsiColor
description setter :添加set build description获取图片

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

Jenkins项目创建

win10下搭建Jenkins+微信开发者工具
#
创建一个自由风格的项目
#
win10下搭建Jenkins+微信开发者工具
#
添加执行批处理构建,并且把如下带粘贴进去
#
win10下搭建Jenkins+微信开发者工具

#
win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

#
<img src="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}" width="200" height="200" /> <a href="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a&gt;;;;;;;;;;;;
#

chcp 65001     ::更改字符集
set dir=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat
set project=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat\dist
::del /F /S /Q %dir%
::rd /S /Q %dir%
git clone git@gitlab.xxxx.com:cdp/sk_platform_consumers_furniture.git %dir%
git pull git@gitlab.xxxx.com:cdp_furn/sk_platform_consumers_furniture.git
"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %dir%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp
CALL "D:\weixin\cli.bat" -o
::for /f "usebackq" %%a in (`type "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do @set port=%%a
::set /p port= < "C:\Windows\System32\config\systemprofile\AppData\Local\微信web开发者工具\User Data\Default\.ide"
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

win10下搭建Jenkins+微信开发者工具

优化beta2.0


chcp 65001

set dir=D:\ingo\Jenkins\workspace\DEV-sk_xxx_app-wechat\dist
set srcdir=C:\Users\xxx\Desktop\tmp  ::做清空使用,必须为空目录
set project=C:\Users\xxx\Desktop\upload-sk_xxx_app\dist-sk_xxx_app%BUILD_ID%  ::将要上传的目录放到非workspace的目录外,如果放到workspace里回提示程序有占用,影响代码更新。
set upload=C:\Users\xxx\Desktop\upload-sk_xxx_app
mkdir %project%

echo %environment%
echo %branch%
echo %describe%
echo %version%

CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git %WORKSPACE%
git pull git@gitlab.xxx.com:cdp_furn/sk_xxx_app.git

"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp

CALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

if %environment% == pro (
CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%'
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

win10下搭建Jenkins+微信开发者工具

优化beta3.0

beta3.0调整了变量使用,实现了可移植,复制的通用性。


chcp 65001

set dir=%WORKSPACE%\dist
set srcdir=C:\Users\xxxx\Desktop\tmp
set project=C:\Users\xxxx\Desktop\upload\%environment%-dist-%JOB_NAME%-%BUILD_ID%
set upload=C:\Users\xxxx\Desktop\upload
mkdir %project%

echo %JOB_NAME% > C:\Users\xxxx\Desktop\upload\name.txt
echo "%JOB_NAME%" | D:\Git-bash\usr\bin\awk.exe -F '-' '{print $2}'
@echo off
for /f "tokens=2 delims=-" %%l in (C:\Users\xxxx\Desktop\upload\name.txt) do ( 
echo %%l
set projectname=%%l
)

echo "projectname##%projectname%##"
echo "environment%environment%"
echo "branch##%branch%"
echo "describe##%describe%"
echo "version##%version%"

CALL robocopy %srcdir% %WORKSPACE% /purge
echo "test success"
git clone -b %branch% git@gitlab.dddd.com:cdp_furn/%projectname%.git %WORKSPACE%
git pull git@gitlab.xxxx.com:cdp_furn/%projectname%.git

"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %WORKSPACE%
CALL node project-handle.js %environment%
CALL npm install node-sass@4.11.0
CALL npm rebuild node-sass@4.11.0
CALL sbtt git %environment%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp

CALL robocopy %dir% %project% /S
CALL "D:\weixin\cli.bat" -o
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web开发者工具\User Data\Default\.ide"`) do (
    echo 当前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

CALL D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

if %uploadif% == prod (
CALL "D:\weixin\cli.bat" -u %version%@%project% --upload-desc '%describe%'
echo "生产环境预览并上传微信小程序平台"
) ELSE (
echo "测试环境仅预览并不上传微信小程序平台"
)

#
构建项目时记得先登陆微信开发者工具,如果没登陆报错如下:
#
win10下搭建Jenkins+微信开发者工具
#
win10下搭建Jenkins+微信开发者工具
#
添加成员
#
注意代码里的appid是否有问题
#
#

win10下搭建Jenkins+微信开发者工具
#
#win10下搭建Jenkins+微信开发者工具

#
win10下搭建Jenkins+微信开发者工具

#
楼镇图

转载于:https://blog.51cto.com/13386520/2355545

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

2019-08-29 21:09:25 CHENxx_zw 阅读数 588

微信开发者工具(一)

1.首先下载好开发工具,我选择的是稳定版Stable Bulid(Windows 64),可根据自己需要选择下载。
在这里插入图片描述
2.下载完成,运行,点击小程序,添加。
在这里插入图片描述
3.输入自己微信小程序的AppID,后端服务选择“不使用云服务”,点击新建,出现如图界面。我们可以看到文件主要分为两类:页面文件和主体文件。
在这里插入图片描述
4.我们先看看utils文件里的app.json:app.json 是当前小程序的全局变量,包括了小程序的页面路径、界面表现、底部tab等。
①pages字段:用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
②window字段:定义小程序所有页面的顶部背景颜色、文字颜色定义、标题等。
在这里插入图片描述
5.tabBar配置,tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
在这里插入图片描述
6.app.json配置项列表:
在这里插入图片描述