小程序的特点
适合做简单的、用完即走的应用
适合低频的应用
适合性能要求不高的应用
缺点：不能实现推送，被动的触发模板消息
不能加载外部页面
不能做直播类的，因为不能做多任务的，不适合做停留太久的应用
不适合用小程序开发的软件有：知乎、直播软件、手游
适合用小程序开发的软件有：饿了么外卖类、猫眼、滴滴打车
大型软件的部分功能可以拆成小程序：豆瓣的评论区、美团的外卖、银行的查询
什么是微信小程序？
不需要下载安装即可使用，因为安装包小于1M，安装过程感受不到
用户“用完即走”，不用关心是否安装太多应用
应用将无处不在，随时可用
B2C 人与商品
P2P 人与人
C2P 人与服务 这个是小程序用意所在
快捷键
格式调整
Ctrl+S：保存文件
Ctrl+[， Ctrl+]：代码行缩进
Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行
光标相关
Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退
编写第一个小程序页面
小程序文件类型与目录结构
注册小程序页面，view image text等组件的基本用法
flex弹性盒子模型
移动端分辨率及小程序自适应单位RPX
home.jpg
移动设备的分辨率与rpx
pt为逻辑分辨率，pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位；
px指物理分辨率，和屏幕尺寸没有关系。因为点没有大小。
1pt可以由1个px构成，也可以有2个px，还可以有3个。
iphone6的1pt有2个px构成
rpx的作用
wxml图片给的宽高是逻辑分辨率，而设计图是物理分辨率。
如何做不同分辨率设备的自适应？
以ip6的物理像素750*1334为视觉稿进行设计，而在小程序中使用rpx为单位
ip6下1px=1rpx=0.5pt
使用rpx，小程序会自动在不同的分辨率下进行转换，而是用px为单位不会。
为什么要用ip6的物理分辨率来做图？
因为好算啊， ip6下1px=1rpx, ip6plus下1px=0.6rpx
不是所有的单位都适合rpx。比如界面有的字体不需要自适应。太小的屏幕文字可能会看不清楚。
注意点：
标签里的属性，设置为true，"true"直接带引号即可。如果要设置为false，需要带上双括号。“{{false}}”。
控制元素是否显示：wx:if="{{true}}"，在脚本里面设置data的值为true或false时，不要带引号。
template组件，一个套一个时，最里面的样式引用写到上一级，上一级再写到上一级。。。
不能直接给template样式，如果要的话，给template外加上view
template是不执行js的，template里面如果有方法，需要找到父级不试template的页面
快捷键：
alt+shift+f 格式化代码
ctrl+p 快速搜索文件
wxml格式化代码的时候右键：格式化代码即可
知识点：
1、调用全局变量
2 、点击更多，如何知道你点击的是那一类型的更多
3、一个js文件里面多个方法共享一个变量，知识点在more-movie.js里面
页面跳转
1、 wx.navigateTo({
这个会自带返回，
注意参数是对象，不是字符串
最多是能是5级
页面跳转后执行的是onHode
2、 wx.redirectTo({}）
1、这个没有返回
2、页面跳转后执行的wx.redirectTo({}）
3、完成的流程
wx.redirectTo({
url: '../posts/post',
success:function(){
},
fail:function(){
},
complete:function(){
//无论失败或者成功都会执行
}
})
事件
bindtap 会冒泡
catchtap
var postData = require('../../data/post-data.js')
//这里只能用相对路径
data: {
//小程序总是会读取data对象来做数据绑定，这个动作称为动作A，
//而这个动作A的执行是在onload事件执行之后发生的
// posts_key:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面初始化 options为页面跳转所带来的参数
// 第一种方式
// this.data.postsdata = postData.postList;
// 第二种方式：异步操作必须用setData
this.setData({
posts_key: postData.postList
});
},
template模板的使用
模板文件的脚本不生效
一般就两个文件wxml和wxss
在页面引入模板：
<import src="post-item/post-item-template.wxml" />
这里既可以用绝对路径也可以用写相对路径
使用的时候：
<template is="postItem" data="{{item}}"/>
这里的is对应的是模板的名字
复用样式的时候：在wxss中引入模板的样式
@import "post-item/post-item-template.wxss";
<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx" wx:key="*this">
<template is="postItem" data="{{item}}"/>
</block>
在模板文件里面每一项都是item.属性名
优化一下：
把模板里面的item.全部去掉，在页面吧data="{{item}}"改成data="{{...item}}"
...相当于吧对象站牌平铺
template相当于占位符，不能绑定事件，可以在template外面加上view
页面列表每一项有一个postId（注意这里I是大写），但是在点击获取该点击事件对象的postid值i要小写，否则获取postId值是undefined
<view catchtap="onPostTap" data-postId="{{item.postId}}">
<template is="postItem" data="{{...item}}" />
</view>
pic.png
1、setData更新数据
this.setData({text:'hello'})
2、组件属性绑定
<view id="item-{{id}}"> </view>
网友评论