小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2018-04-14 16:30:47

摘要:微信小程序学习(一) (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

写在前面:
这个系列博客是本人在学习微信小程序开发时,用来审视学习过程,总结学习成果的,可能有些地方会直接复制微信官方原文,请谅解。

微信小程序学习(一)

一、项目中的文件类型

  • .json后缀的JSON配置文件
  • .wxml后缀的WXML模板文件
  • .wxss 后缀的WXSS样式文件
  • .js后缀的JS脚本逻辑文件

二、各种文件的作用

1.JSON配置文件

(1)位置
项目的根目录有一个app.json和project.config.json
在pages/loges目录下还有一个logs.json
(2)作用
1)app.json
app.json是对当前小程序的全局配置,包括了小程序所有的页面路径,页面表现,网络超时时间,底部tab等
配置中每个项的含义:
pages字段:用于描述当前小程序所有的页面路径,这是为了让微信客户端知道当前你的小程序定义在哪个目录。

window字段:小程序所有页面的顶部背景颜色,文字颜色定义在这里
2)工具配置 project.config.json
保存你在小程序开发者工具上做的任何配置,只要载入同一项目的代码包,开发者工具就自动复原当你开发时的个性化配置。
3)页面配置 page.json
这里的page.json可以让开发者独立定义每一个页面的一些属性,例如顶部颜色,是否允许下拉刷新等。

2.WXML模板

WXML模板起到传统网页编程中HTML的作用,由标签,属性等构成。
与HTML的不同之处:
(1)标签名字不一样
小程序的WXML的标签是view,bitton,text等,这些标签就是小程序给开发镇包装好的基本能力,还有地图、视频、音频等组件。
(2)多了一些wx:if这样的属性以及{{}}这样的表达式
小程序采用MVVM的开发模式(例如React,Vue),提倡把渲染和逻辑分离。简单来说,就是不让JS直接操作DOM,JS只需要管理状态,然后再通过一种模板语法来描述状态和界面之间的关系即可。如果你需要把一个Hello Word的字符串显示在界面上。WXML这么写:
{{mag}}
JS只需管理状态即可:
this.setData({mag:"Hello World"})
通过{{}}语法把一个变量绑定到界面上,即为数据绑定。简单的数据绑定还不足以完整的描述状态和界面的关系,还需要if/else,for等控制能力,在小程序里面,这些控制能力都由wx:开头的属性表达。

3.WXSS样式

WXSS具有CSS大部分的特性,小程序在WXSS里也做了一些扩充和修改:
(1)新增了尺寸单位rpx,省去了换算屏幕大小的麻烦
(2)提供了全局样式和局部样式
(3) 仅支持部分CSS选择器

4.JS交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
{{ msg }}
点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:
Page({  clickMe: function() { 	   this.setData({ msg: "Hello World" }) 	 }})
响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。
此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。
21阅读 | 0评论
你的回应
写文章

10528