微信小程序学习笔记——第一弹:小程序代码结构

    近来被微信小游戏强势刷了一波后,萌生了学习微信小程序/小游戏的冲动~

    作为一个马上就要毕业的学生狗(。☉౪ ⊙。),学习一下新技术,顺道还能丰富自己的简历,简直不能再美滋滋了~~~

    学习笔记会持续更新 至 完成第一个小程序实例,如果以下对小程序的理解有错误的地方,请这位有缘的看官好心修正,小生感激不尽(≖ ‿ ≖)✧~

    以下内容是参考、归纳 微信小程序开发文档 而来~

//===========================================================================

一、get基本装备:小程序账号 + 开发工具

https://mp.weixin.qq.com/ 进入微信公众平台——选择小程序开发文档,按步骤操作。

(注意:邮箱必须没有绑定过微信公众平台、开发平台、其余小程序)


二、查看装备属性:微信web开发者工具

界面十分类似于浏览器代码调试页面,仔细看一下项目文件目录也有一种熟悉感(PS:小生之前做过一段时间前端项目),仿佛有点理解小程序套路了,看来之后的学习能够轻松一点~




三、查看技能属性:代码结构

项目文件目录中的四类文件:JSON配置文件、WXML、WXSS、JS脚本逻辑文件

(1)JSON配置文件:app.json     project.config.json    page.json

其中,page.json中配置内容与app.json内容一致,app.json用于初始全局配置,page.json一般位于pages/logs即,页面或日志文件夹,用于该页面/日志的个性化配置


   


(2)WXML文件:类似于网页开发中的html文件,用于搭建页面结构骨架,实质是以组合html基本标签构成组件,方便用户构建页面,与html的差别见下

    A、标签组件

    组件用x-mind简单归纳了一下:https://pan.baidu.com/s/1o9Gy9Qi

    B、增加wx:if等属性以及{{}}表达式,与vue中v-if等指令属性很类似,目的也相差无几,主要是为了分离视图UI渲染与业务逻辑,形成mvvm模式,抽象出传统网页开发中 获取/修改页面状态并操作DOM树进行视图渲染这一过程,使js只用来管理业务逻辑

    指令用x-mind简单归纳了一下:https://pan.baidu.com/s/1mjz7HhQ

(3)WXSS文件:具有 CSS 大部分的特性,也有一些修改

    A、新增了尺寸单位:rpx 用于适配不同手机,与预期页面效果会有些许差别

建议:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

    B、 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效

可在wxss中导入外部样式列表:@import+'相对路径名'

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

建议:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

    C、 仅支持部分 CSS 选择器



(4)JS文件:处理业务逻辑,通过 事件对象 将视图层与逻辑层串联,可调用微信提供API实现功能逻辑

    A、基本结构,事件绑定可见“WXML指令”的xmind

——APP(object)  注册小程序,一个小程序一次


——Page(object)  注册一个页面


    B、小程序API:文档   https://mp.weixin.qq.com/debug/wxadoc/dev/api/



展开阅读全文

没有更多推荐了,返回首页