小程序开发相关文档阅读指南

最新推荐文章于 2022-11-17 22:59:14 发布

捡一晌贪欢

最新推荐文章于 2022-11-17 22:59:14 发布

阅读量159

点赞数

分类专栏：小程序文章标签：小程序 css 小程序文档阅读 Iconfont使用

本文链接：https://blog.csdn.net/lfq88/article/details/116275617

版权

小程序专栏收录该内容

20 篇文章 3 订阅

订阅专栏

微信官方文档

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/

大致看一下指南里面的起步吧，先有个大致了解
然后把指南里的小程序框架看一遍，这些就是经常用得到的
接下来先不管剩下的那一大堆，用到的时候再说，点开顶部的框架，把里面的内容好好看看
尤其注意看一下里面的wxml语法参考，主要就是循环和条件渲染

至于wxs语法参考，用得到的时候再说，看完上面四个点后，基本就差不多了

CSS文档学习

作为一个原来学电子信息的安卓开发工程师，我并没有系统学过CSS，就算选修看了看也大都忘了，而且没有实际经验，如果读者精通CSS那就跳过此节吧。

这里我推荐w3cschool的教程，至少我看起来感觉逻辑清楚一些

https://www.w3school.com.cn/css/css_align.asp

先把基础部分的内容看完，东西有点多，可能会挺枯燥，但是还是挺简单的
接下来把中级教程看完就行了，我觉得对齐那一节挺有用处的，可以仔细看看
其实看完，也只是大概了解了一下，但是还是有些东西要进到脑子的

什么是块级元素？什么是行间元素？
什么是盒子模型？box-sizing有什么作用？
怎么居中？子元素居中？自身内容居中？横向居中、垂直居中？
margin、padding怎么使用？有什么需要注意的？
如何设置背景颜色、字体颜色？
border的使用？如何设置圆角？
display:none和visibility: hidden有何区别？和wxml中的wx:if以及hidden又有什么区别？
…

其他的问题就不列举了，暂时就想到这么多，比较实用。

iconfont的使用

设计师总喜欢搞些麻烦的东西，之前还想让我再安卓上使用iconfont，我没理他，现在换小程序了，我好像没那么占理了，就勉强用用吧。

其实官方的文档还是可以的，不过也没那么复杂了，下面是官方文档。

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code

在小程序上的使用也很简单，直接点击下载到本地就行，如果有用不到的图标，建议让设计师专门再弄一个项目，我们也省事。
下载完了，两个demo文件用不到可以删除，css文件需要改成wxss使用，至于iconfont.js文件，我也建议删除，因为加上了，后面预览和发布都会显示白屏，有很大的问题。
具体操作就是在小程序的根目录下建个文件夹丢进去，在全局的wxss里面导入就行

这里也把我其他使用较多的css一起发一个吧

@import '/assets/fonts/iconfont.wxss';

.row{
  display:flex; 
  flex-direction:row;
}
.row-center{
  display:flex; 
  flex-direction:row;
  align-items: center;
}
.row-right{
  display:flex; 
  flex-direction:row;
  align-items: flex-end;
}
.col{
  display:flex; 
  flex-direction:column;
}
.col-center{
  display:flex; 
  flex-direction:column;
  align-items: center;
}
.center-both{
  display:flex; 
  justify-content: center;
  align-items: center;
}
.col-bottom{
  display:flex; 
  flex-direction:column;
  align-items: flex-end;
}

.center{
  margin: auto;
  width: fit-content;
}