小程序 | 语法糖的博客

最近学习了下小程序的编写，理由：

vue 还有 react 没学会，小程序是真的简单，类似后台模板引擎
微信不会弹广告，vue或者react 编写的webapp 在一些安卓手机浏览器上，比如魅族自带的浏览器，访问的时候会有很多广告的出现
不用记域名，之前在做itbasic的时候，就发现大家都记不住域名，导致pc端还好，大家可以收藏域名，手机端完全不会去使用
练习js, 熟悉es6
这篇文章的目的不是介绍小程序的简单使用，只是想记录下容易忽略的知识点（包括es6中），完成了项目的时候才发现，代码是练出来的，而不是看出来的

目录结构

app.wxss

是全局样式文件，比如我们想让每个page页面的背景色从白色变成灰色，可以在这里面定义，又比如我们对iconfont 的使用。

iconfont 的使用

我们在编写前端页面的时候经常会需要小图标，现在比较流行iconfont, 我们在阿里的那个官网上选择好图标
然后选择添加至项目

选择项目名称

选择font class ,在线链接，查看线上地址，复制所有css ,保存到本地，然后在这个全局css 中引入，就可以全局使用了

1	@import 'styles/iconfont.wxss';

我们通过修改font-size 和 color 可以修改图标的大小和颜色（毕竟实际上这些图标都是字体）

app.json

主要是页面pages 路径的配置，一些基础配置，tabBar (注意tabBar 没有对应的pages ，pages页面上是不会显示tabBar的)，引入的组件如果想全局使用，也可以在这个页面上配置

components

编写的组件位置，其实和pages文件夹差不多，感觉就是组件里面文件一般用index 命名，而pages 里面一般用文件夹名称命名

其他的文件夹都是可以自己定义的，其实小程序只是给了一个标准的最简单的项目目录，很多时候都可以自己定义文件夹，然后引入

引入 js
import {config} from '../config.js'

这个config.js 中被引入的内容需要在文件中导出
const config = 4;
export {config}

感觉和PHP 不一样的地方就是php 一般都是include 文件，而不是对具体变量的引入和导出，当然现在很多时候php 一个文件就是一个class,也是类似一个变量的存在

小程序知识

wxml

页面，
wx:if , wx:for 去判断，循环页面元素，
rpx 是小程序上的计量单位，没听懂，反正知道通过使用它，可以实现页面的自适应
flex 页面布局

display:flex;
flex-direction: row;
just-content: (主轴) row 横着排列（横 主 纵 副）column (纵 主 横 副) space-between 等（todo: flex 均分怎么实现）
align-item: （副轴）

positon

1 2	position:relative (相较于自身) position:absolute(因为一般只有固定在底部或者首部用到，所以一般这样定位的话就是相对于页面)

目前用到的元素：view ,image(类似view)
绑定点击事件 bind:tap, bind:like
引入组件：在该pages json 文件中引入，或者全局json 中引入，（父组件给子组件传值通过属性）然后用组件名称使用，在父组件上定义属性，传入子组件定义的data中（子组件给父组件传值通过事件，子组件抛出事件，触发父组件绑定的事件）

js

let 新的定义变量方式，if 或者 for 中定义的，外面获取不到
const 不能改变的量
onLoad 方法中一般写入初始化的时候对后台接口的请求（蛋疼的就是经常页面加载的时候出现抖动，当返回数据比较慢的时候）
自定义的方法就写在最外层就好了
data : 定义页面中的值，初始化
setData :改变页面中的值
wx.getStorage() 感觉这些就是类似调用系统接口，应该安卓和ios 中用的比较多，这是微信封装的，注意其中的同步和异步之分