[自用向]微信小程序摸黑探索笔记1

想了解一下微信小程序的开发,所以打开了 微信小程序官方指南 边学边进行记录。

简介

小程序主要还是用JavaScript进行开发,需要一定css和js的基础,作为java后端开发,这些忘得都差不多了,但这正是我学习微信小程序的目的。在传统网页开发中,渲染线程和脚本线程是互斥的,如果长时间运行脚本可能导致页面失去响应,但是在小程序中,这俩是分开的,分别在不同线程运行。逻辑层在JSCore中,所以有些库(JQuery、Zepto...)没法用。小程序的开发主要面对两个操作环境:IOS和安卓。还有一个辅助的小程序开发者工具。

准备工作

先去申请个账号:小程序注册
信息填好之后,能看到appID。
下一步就是安装一个 开发工具:开发者工具
把appID填进去就成功配对了。

代码构成

QuickStart之后会发现初始化了一个页面,旁边是项目,项目主要有这四种类型:

  1. .json后缀,是配置文件。
  2. .wxml后缀,是模板文件
  3. .wxss后缀,样式文件
  4. .js后缀,脚本文件
JSON文件

json主要是做静态配置。
1.app.json 小程序配置
这里面最基础有两个部分,一个pages,一个window。
pages字段:用于描述当前小程序所有页面,为了让微信客户端知晓小程序定义在哪个目录。
window字段:定义小程序所有页面的顶部颜色,文字颜色定义。
然后下方栏可以通过tabBar设置名称和图标。具体在官方文档的框架部分有教学,真的是怕你学不会。

2.project.config.json 工具配置
这个主要是针对个性化的配置,在工具上做的任何配置都会写到里面,重新安装工具或者换电脑的时候,载入到同一个项目的代码包,工具就会恢复到自定的个性化配置。

3.page.json
小程序页面相关配置,这个主要是对应全局,比如在app.json设置全局是蓝色,但是我某个页面主题要红色,这样就可以进行调整。

WXML 模板

web编程是通过Html+Css+js进行组合。html是描述页面结构,css定制页面的形象,js是处理用户交互。那么wxml对应的就是html。点开之后让我想起了vue。。。与传统html不同的是,这边已经给封装好了,常用组件已经被包装起来了。
然后看到的wx:if和wx:else让我想起了EL表达式额。主要思想还是MVVM的渲染和逻辑分离。不让js直接操控dom,js负责状态管理。状态和界面结构之间的关系,通过模板语法去解决就可以了。
我们可以通过{{ }}语法,把在js定义的变量绑定到界面,这叫数据绑定,除了这种简单的,我们可能需要描述稍微复杂的逻辑,比如if/else和for,这里我们就wx:开头的属性来表达。

WXML 样式

这个就对应了CSS。

JS 逻辑交互

官方例子是:比如在wxml里面

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

然后点击button想要显示"Hello",那么只需要在js文件里面声明clinkMe方法对应就可以。

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

这就完成了,但是这是对基础的,想要实现中高级的功能要自己慢慢试。。。QuickStart 例子中,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,667评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,361评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,700评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,027评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,988评论 5 361
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,230评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,705评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,366评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,496评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,725评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2 341

推荐阅读更多精彩内容

  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,299评论 0 0
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,312评论 0 9
  • 原文:http://gold.xitu.io/entry/57e34d6bd2030900691e9ad7/pro...
    AiPuff阅读 2,491评论 0 3
  • 1 从小学到高中,成绩一直名列前茅,貌似在当时仅仅以成绩论英雄的时候,我并没有深感不适。然而看似一切的一帆风顺,总...
    哈默老师阅读 578评论 7 11
  • 清明时节雨纷纷,路上行人欲断魂 我不在路上,却仍旧断魂般。 原本的此刻,我应该在家中,走在那一遍山路上。 我依旧清...
    bufans阅读 305评论 0 1