小程序——小程序的前端开发

一、辅助工具下载

在有ui设计图的情况下如果是自己硬去写一定会和ui设计图差别很大，推荐软件：微信小程序前端开发者工具 提取码：cam7 网盘链接 可以输入提取码后直接下载。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高工作效率，减少前端布局的编写工作。

微信小程序前端开发者工具使用教程 教程演示过程充值了vip 其实只要有了固定的格式很多汉字或者图片开发者自己输入就行 主要是要用生成的wcss和xml

二、前端开发资料总结

其实xml和html差不多 也就是说wcss和css的样式很多时候都是相似的，在查找样式时可以直接搜索css的
1.display属性中的弹性布局Flex
2.小程序前端页面（总结）

三、阿里巴巴矢量库的使用

在前端编写的过程中，有一些图标可以不以路径的方式引入而是直接使用阿里巴巴矢量库 教程如下：
使用阿里矢量图标库操作流程

小程序中的引用方式如下：

在和pages同级的目录下创建style文件夹，style文件夹下面创建iconfont文件夹，在iconfont文件夹下面创建iconfont.wxss文件

将使用阿里矢量图标库操作流程中的css文件整个粘贴到iconfont.wxss中

在app.json中添加引用

/**app.wxss**/
@import "style/iconfont/iconfont.wxss";

现在在xml中可以直接引用，方式如下：

<text class="iconfont iconphone"></text>

就相当于引用了iconfont.wxss中的iconphone图标

.iconphone:before {
  content: "\e60f";
  color: #02C0B5;
  font-size: 75rpx;
}

注意：不知道是因为升级还是小程序的原因我采用上述链接中的仅保存的方法再复制到iconfont.wxss中并不是保存好的样式，所以我在iconfont.wxss中逐个修改，修改方式整理如下：

content：矢量库中的样式“名字/编号/代码”
color：必须是十六进制 图标的颜色
font-size：图标的大小（默认好像是30rpx）
position: relative; （如果一直没调整出来合适的位置可以试一下这个）

和前端一样也可以用 padding-left/right的形式来调整左右边距

四、背景图片的设置

参考资料：背景图片解决方法
我用的方法是BASE64编码的方法
编码BASE64
在这个↑网址中直接转换编码成功后复制

page{
  background-image: url()
  }

再把复制好的复制到需要背景图片的wxss页面就可以了（这个page也是自己定义的wxss，代表的是整个页面）