区块链、APP、公众号、小程序、物联网、智能硬件、网站开发新模式,安全,超速,可控。
所在位置:
微信小程序切片软件教程
微信小程序切片工具-操作手册
      人气:

 

操作手册

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

目录

1         切片软件介绍--------------------------------------------------------------

1.1       切片软件功能介绍 --------------------------------------------------------

1.2       切片软件下载     --------------------------------------------------------

1.3       切片视频演示     --------------------------------------------------------

1.4       切片软件界面--------------------------------------------------------------

1.5       切片最低配置环境---------------------------------------------------------

2                小程序申请----------------------------------------------------------------

2.1       申请小程序账号-----------------------------------------------------------

2.2       下载安装《微信web开发者工具》----------------------------------------

2.2.1    2018.05.18更新日志------------------------------------------------

2.2.2    2018.05.15更新日志------------------------------------------------

3              创建小程序----------------------------------------------------------------

3.1           创建小程序目录--------------------------------------------------------

3.2           微信扫码登录----------------------------------------------------------

3.3           新建小程序项目--------------------------------------------------------

3.4           创建小程序项目名称---------------------------------------------------

4                小程序配置----------------------------------------------------------------

4.1           JSON配置-------------------------------------------------------------

4.1.1         小程序配置 app.json-----------------------------------------------

4.1.2         工具配置 project.config.json--------------------------------------

4.1.3         页面配置 page.json------------------------------------------------

5                WXML 模板----------------------------------------------------------------

6                WXSS样式-----------------------------------------------------------------

7                JS交互逻辑----------------------------------------------------------------

8                创建小程序目录------------------------------------------------------------

8.1           在小程序项目中创建目录------------------------------------------------

8.2           配置  app.json --------------------------------------------------------

9                打开《微信小程序前端开发者工具-小程序切片-小程序定制开发神器》-----

9.1          点击左上角文件,点击导入效果图----------------------------------------

9.2          给页面命名、选择语言、填写标题----------------------------------------

9.3          页面设置-----------------------------------------------------------------

10               开始切片-------------------------------------------------------------------

10.1         切片规则-----------------------------------------------------------------

10.2         设置背景颜色-------------------------------------------------------------

10.3         设置边框宽度和高度-------------------------------------------------------

10.4         设置边框-------------------------------------------------------------------

10.5         设置圆角、原型图片-------------------------------------------------------

10.6         设置图片------------------------------------------------------------------

10.7         设置文字------------------------------------------------------------------

10.8         设置按钮、文本框、多行文本框、滚动器、单选框、多选框---------------

10.8.1   设置按钮背景------------------------------------------------------------

10.8.2   设置按钮、填值---------------------------------------------------------

10.9         固定底部导航位置--------------------------------------------------------

10.9.1   选中切片----------------------------------------------------------------

10.9.2   固定位置----------------------------------------------------------------

10.9.3   编辑---------------------------------------------------------------------

10.10         设置底部导航------------------------------------------------------------

10.10.1  图标准备----------------------------------------------------------------

10.10.2  更改配置文件------------------------------------------------------------

10.11          刷新、生成--------------------------------------------------------------

10.12          保存切片文件------------------------------------------------------------

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1    软件介绍

微信小程序前端开发者工具-小程序切片-小程序定制开发神器

       微信小程序前端开发者工具(小程序切片)是一款根据效果图像画画一样来设计微信小程序,自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率,减少前端布局的编写工作。

1.1    功能如下:

1.切片功能:原来手工写的这部分工作,可以用切片软件的方法来切。切好后,可以自动生成wxml,wcss,js文件。
2.文字识别功能:效果图上的文字可以通过自动文字自动识别识别出来,提高录入速度,减轻工作量。
3.存档功能:设计好的切片文件可以存档,以便下次编辑。只要有切片文件在,换了程序员也可以修改和编辑。

1.2    软件下载

1.3    视频演示

演示案例下载演示视频  演示文件下载


1.4    软件界面:


生成出来的界面

1.5    安装最低配置:

1. 支持操作系统:windows xp/vista/windows2003/win7/win8

2.  IE, Firefox, Mathxon等浏览器

3.  512M RAM 内存,80G硬盘,100Mbps 网卡

4.  .net4.5以上框架  

1.6    安装说明:

1. 先安装本软件,WIN7/WIN8建议不要装在c盘,安装完成后右键以管理员身份运行 

2. 如果不能运行,请安装.net4.5框架,推荐下载地址:http://rj.baidu.com/soft/detail/22370.html?ald

1.7    安装问题:

提示是:未能加载文件或程序集“CefSharp.Core.dll”或它的某一个依赖项。找不到指定的模块

具体原因是因为CefSharp运行需要Visual C++ Redistributable Packages for Visual Studio 2012和Visual C++ Redistributable Packages for Visual Studio 2013这两个东西,但是有时候电脑上没有安装这个运行环境,因此我们需要下载并且安装,然后就能成功运行了。下面是对应的下载地址,要区分x86和x64哈,如果都不行,建议尝试两个环境都安装一下。 

Visual C++ Redistributable Packages for Visual Studio 2012 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=30679

Visual C++ Redistributable Packages for Visual Studio 2013 下载地址:https://www.microsoft.com/zh-cn/download/details.aspx?id=40784

2    小程序申请

2.1   申请帐号

开发微信小程序须知https://developers.weixin.qq.com/miniprogram/dev/

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

登录 https://mp.weixin.qq.com ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

2.2    微信web开发者工具

    最新版本下载地址 (1.02.1805180)

windows 64 、 windows 32 、 mac

2.2.1    2018.05.18 更新日志

1 修复 1.02.1805150 引入的 <web-view/> 组件显示异常的问题 详情

2 修复 1.02.1805150 引入的小屏幕电脑上模拟器容器没有滚动条的问题

3 修复 小程序 iPhoneX 模拟器刘海丢失的问题

4 修复 覆盖安装后启动的工具版本号还是旧版本的问题

5 修复 windows 安装界面乱码的问题 详情

6 修复 自定义组件中节点动态删除导致 wxml 面板白屏的问题 详情

7 修复 小游戏调用 wx.setPreferredFramesPerSecond 后丢帧的问题

8 修复 小游戏使用 fs.writeFileSync 写入一个 ArrayBuffer 类型的数据,encoding 指定为 binary 时会导致写入的文件内容错误的问题

9 修复 使用插件时,插件中的图片没有显示的问题

10 修复 小程序中带有 sourcemap 时解析失败导致上传报错的问题

2.2.2    2018.05.15 更新日志

1 新增 素材管理功能 详情

2 新增 工具栏右键进行工具栏管理 详情

3 新增 独立窗口显示模拟器和调试器的功能 详情

4 新增 可以在工具栏切换小程序模式和插件模式

5 新增 小程序使用的插件有更新时,在控制台提示插件更新

6新增 小游戏 wx.createUserInfoButton 调试支持(基础库需选择2.0.6)

7 新增 当插件有更新时,在插件使用者的调试器控制台提示更新

8 新增 插件 README.md 文档编辑及上传功能

9 新增 小游戏广告展示

10优化 多核编译的实现方案

11优化 开发者工具中基础库的更新逻辑,实时获取最新的基础库

12修复 1.02.1804251 引入的修改 game.json 中的 deviceOrientation 不生效的问题

13修复 1.02.1804251 引入的小游戏重新编译时音效没有重置的问题

14修复 1.02.1804251 引入的 addEventListener 报错导致无法显示页面的问题 详情

15修复 小游戏 wx.getUpdateManager 无效的问题

15修复 小游戏 wx.onShow 偶尔不触发的问题

17修复 小游戏默认背景颜色与真机不一致的问题

18修复 小游戏 状态栏位置异常的问题

19修复 小程序业务逻辑(复杂计算或死循环)导致重新编译无效的问题

20修复 横屏时 iPhoneX 刘海位置异常的问题

21修复 wx.showModal 在页面路由之后消失的问题

22修复 开启自动保存修改时,在 app.json 中新增 page 出现多个中间页面的问题

23修复 开发者工具 1.6.0 基础库调用 wx.createInnerAudioContext 无效的问题

24修复 <picker fields="year" value="2018"/> 显示 1970 的问题 详情

25修复 开发者工具支持 HTTP2 而真机不支持 HTTP2,导致网络 Response Headers 大小写不一致的问题

26修复 不处理 wx.authorize 授权窗,直接重新编译,再也无法弹出授权窗,清除缓存编译也无法弹出的问题

27修复 多开项目时社区消息会重复通知的问题

28修复 命令行调用无法打开游客模式的项目的问题

29修复 点击胶囊关闭按钮,不会触发 App.onHide 的问题

30修复 自带背景音乐播放器窗口没有播放按钮的问题 详情

31修复 快速修改 text 节点时在 WXML 面板中显示异常的问题

32修复 referrerInfo.extraData 类型与文档不一致的问题 详情

33修复 <web-view /> src 没有更新的问题 详情

上一版本下载地址 (1.02.1803210)

windows 64 、 windows 32 、 mac

3    创建小程序

3.1    创建小程序目录

在存放微信小程序项目的磁盘中创建两个文件夹,如下示例,名称可以自己命名。

3.2    微信扫码登录

  打开《微信web开发者工具》,用微信扫码登录

3.3    新建小程序项目

新建一个项目,点击微信web开发者工具左上角的项目,然后点击新建,如图

然后就到了一下这个页面

3.4    创建小程序项目名称

AppID申请地址:https://developers.weixin.qq.com/miniprogram/dev/

最后点击确定就可以了。

接下来我们会看到这个页面,我们来看下

你可以留意到这个项目里边生成了不同类型的文件:

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

接下来我们分别看看这4种文件的作用。

4    小程序配置

4.1    JSON 配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下他们的用途。

4.1.1   小程序配置 app.json

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

我们简单说一下这个配置各个项的含义:

1. pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

2. window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的。

其他配置项细节可以参考文档 小程序的配置 app.json 。

4.1.2    工具配置 project.config.json

通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

其他配置项细节可以参考文档 开发者工具的配置 。

4.1.3    页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 小程序的配置 page.json 。

5     WXML 模板

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

<view class="container">

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>

    <block wx:else>

      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto">

    <text class="user-motto">{{motto}}</text>

  </view>

</view>

HTML 非常相似,有标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:

标签名字有点不一样 往往写 HTML 的时候,经常会用到的标签是 div, p, span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。 从上边的例子可以看到,小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力 更多详细的组件讲述参考下个章节 小程序的能力

多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。 小程序的框架也是用到了这个思路,如果你需要把一个 Hello World 的字符串显示在界面上。 WXML 是这么写 :

<text></text>

JS 只需要管理状态即可:

this.setData({ msg: "Hello World" })

通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。 更详细的文档可以参考 WXML

6     WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。

此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

7    JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>

<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

Page({

  clickMe: function() {

    this.setData({ msg: "Hello World" })

  }

})

响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。

此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。

8    新建小程序目录

8.1   在小程序项目中创建目录

接下来我们来创建一个目录,鼠标右键点击Pages,新建—>目录,名称随便取,回车确定就行

8.2   配置app.json

9    打开《微信小程序前端开发者工具-小程序切片-小程序定制开发神器

9.1   点击左上角的 文件,点击导入效果图

9.2    给页面命名、选择语言、填写标题

9.3   页面设置

1.选择小程序根目录(我的根目录是微信小程序布局),

2.选择页面导出目录,就是我们之前在微信web开发者工具中创建的那个目录,

  3.选择服务器后端文件目录(就是最开始创建的那个文件夹,我的是后台代码)

  4.填写小程序接口网址

  5.页面宽度和自己的效果图宽度一致,最后点击保存就行了

10    开始切片

10.1   切片规则

点击div,根据切片规则先切一个大的切片,把整个效果图包在里面,然后根据切片规则依次往下切,详细切片规则:http://www.ymznkf.com/new_view_545.htm

10.2    设置背景颜色

点击下方菜单栏中的普通属性,找到背景颜色,选择就可以了

10.3    设置边框宽度和高度

点击普通属性,填写高度和宽度

10.4    设置边框

点击普通属性选择边框颜色、边框大小、边框样式

10.5    设置圆角、圆形图片

(如宽高为100[*]100,那么把圆角设置为50),点击普通属性选择圆角大小

10.6    设置图片

10.7    设置文字

先把文字切出来,让后选中该切片,点击鼠标右键—>切片快速工具—>文字识别

10.8    设置字体

调节字体和文本,设置文字字体大小、颜色、对其方式、行距等

10.8    设置按钮、文本框、密码框、多行文本框、滚动选择器单选框、多选框

10.8.1   设置背景

先把按钮切出来,选择背景颜色(上面有方法),

10.8.2   击网页空间—>按钮,填写值

10.9     固定底部导航位置

10.9.1   选中切片

10.9.2   固定位置

在软件下方属性中选择“特效”,设置特效,选择“固定位置”

10.9.3    编辑:

10.10   设置底部导航

我们先来看个效果图

这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢?两步就搞定!

10.10.1   图标准备

阿里图标库  http://www.iconfont.cn/collections/show/29

我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮

在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 

将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了

10.10.2   更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

[html] view plain copy

00001. "tabBar": {  

00002.    "color": "#a9b7b7",  

00003.    "selectedColor": "#11cd6e",  

00004.    "borderStyle":"white",  

00005.    "list": [{  

00006.      "selectedIconPath": "images/111.png",  

00007.      "iconPath": "images/11.png",  

00008.      "pagePath": "pages/index/index",  

00009.      "text": "首页"  

00010.    }, {  

00011.      "selectedIconPath": "images/221.png",  

00012.      "iconPath": "images/22.png",  

00013.      "pagePath": "pages/logs/logs",  

00014.      "text": "日志"  

00015.    }, {  

00016.      "selectedIconPath": "images/331.png",  

00017.      "iconPath": "images/33.png",  

00018.      "pagePath": "pages/test/test",  

00019.      "text": "开心测试"  

00020.    }]  

00021.  },  

[html] view plain copy

00001. "tabBar": {  

00002.    "color": "#a9b7b7",  

00003.    "selectedColor": "#11cd6e",  

00004.    "borderStyle":"white",  

00005.    "list": [{  

00006.      "selectedIconPath": "images/111.png",  

00007.      "iconPath": "images/11.png",  

00008.      "pagePath": "pages/index/index",  

00009.      "text": "首页"  

00010.    }, {  

00011.      "selectedIconPath": "images/221.png",  

00012.      "iconPath": "images/22.png",  

00013.      "pagePath": "pages/logs/logs",  

00014.      "text": "日志"  

00015.    }, {  

00016.      "selectedIconPath": "images/331.png",  

00017.      "iconPath": "images/33.png",  

00018.      "pagePath": "pages/test/test",  

00019.      "text": "开心测试"  

00020.    }]  

00021.  },  


解释一下 对应的属性信息

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

如果要改变更详细的样式 请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

10.11   刷新、生成

最后点击刷新,点击生成

点击是

检查路径,点击确定

这样就可以了,接下来就可以到微信web开发者工具中可以去看效果了

10.12   保存切片文件

我们可以把切好的切片文件保存下来,以便以后修改和使用,点击左上角的文件—>保存另存,选择要保存的路径就可以了,下次使用的时候只要导入切片文件和效果图就可以自动生成代码了。

如果有什么疑问请联系我们

Q  Q  :   348961183

更多免费教程:http://www.ymznkf.com/index.htm

官网网址:http://www.ymznkf.com/index.htm

版权所有 © 2017 ymznkf.com. 成都玉目科技有限公司 蜀ICP备17032468号-1