安卓开发者的小程序入门整理 页面文件结构

leo7723
210 阅读5分钟

最近接了个小程序的活差不多快完结了所以写一下顺便总结
也想更系统化给自己过一遍

写在前面

  • 这篇主要是一些小程序和安卓原生APP对比做一个快速的入门。
  • 后面几天也会更新一些小程序生命周期、异步操作、canvas画图这些我自己在开发中觉得可以拿出来讲讲的东西。
  • 至于详细的API函数这里不会太多的去讲，微信官方文档十分完善而且现在更新频繁这里建议还是以官方文档为主，至于API可以做些什么所有的能力都在小程序示例这个小程序里有所体现（和PM撕*必备
  • 最后会总结一些坑点和值得注意的地方（多半是吐槽
  • 文中所有的IDE都是指微信开发工具中文实在是太长了 在此说明

WXSS WXML JS （JSON）

页面文件结构我认为这是最基础的东西拿来一块儿讲
上面的4种代码文件构成了一个页面具体如图

因为我不是前端开发者 一开始并不清楚 前面三个去百度只会给你讲

HTML是骨架 CSS是外表 JS是灵魂

emmmm...还是不懂对吧，不懂就对了，其实理解之后发现这样说是完全正确的，只是太抽象不太适合新手理解。
这里有一个针对Android开发者的栗子

WXML -> layout.xml WXSS -> style.xml JS -> JAVA.class

这样会不会清楚一些 但是这只是一个方便理解东西并不能完全类比下面将详细介绍
对了 这里不会对WXML与HTML CSS与WXSS做对比
还是那个原因 我不会WEB前端 并不能准确的去对比

所以下面也是从一个安卓开发者的角度去讲标题的4件东西

WXML

在我看来它是一个自带Databinding的LAYOUT文件

首先基础功能 在这里去选取控件 注意这里使用是选取
关于控件的具体大小尺寸位置在HTML+CSS这个结构中大都是建议去CSS文件里完成的
直接在WXML文件中去添加也是可以的 写在style里面也可以
但是IDE不会智能补全提示代码

magrin？ margin？ emmm 有点痛苦

和Android不太一样 需要注意
但是路径 事件 组件特殊属性 只能在WXML里面生效
这些写在WXSS里面不会报错 但也没有效果
比如 image 的 src 路径

<image src="{{item.avatar}}"  class="avater"></image>

在WXML里说明的这些属性 IDE也是会有提示的
(随口吐槽 特殊属性open-type属性在我写下这篇的时候WXML依旧没有提示)

然后是数据绑定
WXML拥有一定的函数能力可以自己解析JSON wx:if wx:elif wx:else wx:for （建议去官方文档查看有充足的例子很详细）
加上小程序是天生带Databinding的数据与界面直接绑定 刷新数据就可以直接刷新页面
这个比单纯的layout文件就强多了 其实比安卓的Databinding框架也更简洁
这样就直接加快了开发速度 举个栗子
JS code

Page({
  data: {
    name : 'Leo7723"'
  },
  ...

WXML

<text class='text-24px'>{{name}}</text>

双括号内写上变量名就可以直接绑定了 后续刷新 在js里面改变data的name值就可以直接刷新页面 这里给一个组件列表

WXSS

花样百出的STYLE文件
在WXML里的classs属性里面去具体调用
之所以说花样百出，真的很佩服前端的CSS
除了正常操作 位置大小颜色
CSS还控制整体布局方式 甚至可以画图 比如箭头
WXSS的单位是rpx 配适都是自动的

其次重要的是flex布局 点击这里有详细教程
关于CSS不太常用的属性类型其实还有很多而且很杂
但是sketch的代码提示 （对就是那个对于安卓开发没什么用的代码提示）
对于前端是十分有用的 我的CSS代码基本靠它 （但是系统学习CSS也很重要 严肃脸）
所以我觉得学会flex类和box类这俩特殊的 基本上就可以开发了
着重说一下的是在具体使用上自己对于CSS文件和HTML里面style属性的理解顺便给一个小tip
这两者都可以加载CSS属性 你可以在CSS里面书写在HTML里面通过class属性去应用
也可以直接把属性写在HTML的style属性里面
其实对于复用频率不高的一组设计是没什么问题的 在CSS文件书写可以精简HTML代码
而且IDE还有代码提示
但是试想一下 对于字体这种复用频繁的就不是很合适了 举个栗子

.text-72px{
  font-size: 72rpx;
  color: black;
  font-weight: bold;
  margin-top: 8rpx;
}

当一个页面有好几个文字都是72rpx 但是他们的位置 比如margin属性 各不相同
这样为了更好的复用 (偷懒)
那么margin属性是明显应该更合适的放在HTML的style里面而不是写在CSS里面
这只是一个小的tip
为了更好的复用 (偷懒) 你也可以像安卓一样弄一个text.css 在具体的地方去
@import "text.css";
还不是美滋滋

JS & JSON

JS没什么好说的ES5和ES6都适用 IDE自带转码
在生命周期函数类调用自己的代码就可以了
关于这个JSON文件
这个里面可以规定当前页面的 标题 顶部颜色 等 具体点击
小程序JSON
注意一点链接给的window里面的属性才可具体用于某一页面
页面里没有定义会继承APP的定义

{
	"navigationBarTitleText": "main"
}

本来还想写多一点 写着写着饿了 分P好了 下次时间接着总结 先立FLAG

avatar
文章
阅读
粉丝