微信小程序前端开发学习笔记（一）
参考地址：官方文档
一、小程序与普通网页开发的区别
网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
二、创建一个小程序
三、小程序代码构成
1、JSON 配置
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json
1.1 小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
//用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
"pages":[
"pages/index/index",
"pages/logs/logs"
],
//定义小程序所有页面的顶部背景颜色，文字颜色定义等
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
1.2 工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
1.3 页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
2、WXML 模板
WXML 充当的就是类似 HTML 的角色
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
3、WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
3.1 尺寸单位 rpx
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
3.2 全局的样式和局部样式
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3.3 此外 WXSS 仅支持部分 CSS 选择器
4、JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
5、程序与页面
小程序的一个页面是怎么写的：
例：pages/logs/logs 下其实是包括了4种文件的
①、微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。
②、紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。
③、最后客户端会装载 logs.js
6、组件
小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。
就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上
<map></map>
<view></view>
<swiper></swiper>
查看更多组件：微信小程序组件
7、API
为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用
//获取用户的地理位置
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 纬度
var longitude = res.longitude // 经度
}
})
//微信扫一扫
wx.scanCode({
success: (res) => {
console.log(res)
}
})
查看更多API：微信小程序API
需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
四、小程序开发
4.1 新建文件
如下图所示：在app.json文件中新增"pages/demo/demo" 即可新建demo文件夹，里面包含了4种文件格式（.js/.json/.wxml/.wxss）
4.2 基本语法
4.2.1 WXML
语法上与html非常相似
<标签名 属性名1="属性值1" 属性名2="属性值2" ...>这里输入文本</标签名>
<!-- 在此处写注释 -->
<text>这里输入文本</text>
<!-- 在此处写注释 -->
<view>
<text class="class">这是一段文字</text>
<image class="img" src="./image/a.png" ></image>
</view>
1.有所不同的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误
2.WXML中的属性是大小写敏感的，也就是说 class 和 Class 在WXML中是不同的属性
4.2.1.1 数据绑定
在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。
在小程序中，使用 WXML 语言所提供的数据绑定功能
demo.wxml页面：
<text>我的名字是:{{name}}</text>
demo.js页面：
data: {
name:'小民'
}
最终实现效果：
WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性
属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，代码如下：
<text data-demo="{{demo}}">这是一段文字</text>
需要注意的是变量名是大小写敏感的，也就是说 {{demo}} 和 {{Demo}} 是两个不同的变量
4.2.1.2 条件逻辑
WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{num >= 5}}"> 该数字大于5</view>
<view wx:elif="{{num <= 2}}"> 该数字小于2 </view>
<view wx:else> {{'该数字为：' + num}} </view>
data: {
name:'小民',
num:'7'
}
最终输出：该数字大于5
4.2.1.3 列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{'下标变量名' + index}}: {{'值' + item.msg}}
</view>
array: [
{msg: '123'},
{msg: '456'}
]
最终输出：
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
4.2.2 WXSS
WXSS与Web开发中的CSS类似
app.wxss 项目公共样式
xxxx.wxss 页面样式
4.2.2.1 尺寸单位
在WXSS中，引入了rpx（responsive pixel）尺寸单位，适配不同宽度的屏幕
4.2.2.2 WXSS引用
@import ‘./demo.wxss’
4.2.2.3 内联样式
WXSS内联样式与Web开发一致，不做多的说明
小程序支持动态更新内联样式：
<!--可动态变化的内联样式-->
{
Color: 'blue',
Fontsize: '12rpx'
}
<view style="color: {{Color}}; font-size: {{Fontsize}}"></view>
4.2.2.4 选择器
官方地址：选择器
4.2.3 JavaScript
小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。
扫一扫
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
