小程序学习笔记（1）

小程序学习笔记（1）
以下是学习期间记录的笔记：
10-18号晚上学习笔记：
小程序实际上是需要下载安装的，只是很小，用户基本上觉察不到
组件是具有一定的功能的代码的集合
移动端适配：
物理像素：是图像显示的最小单元，可以将物理像素看成像素点
设备独立像素和CSS像素
dpr和DPI和PPI
dpr表示的是：设备像素比，物理像素/设备独立像素 = dpr；
PPI 表示的是：一英寸显示屏上的像素点个数
DPI 表示的是：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清
小程序适配方案：
1rpx = 1物理像素 + 0.5 px
找配置性的东西需要到API中的框架中寻找

App()是用来进行注册小程序的
app.json文件中是全局配置

10-19号下午学习笔记：=======================================
小程序中推荐使用flex布局方式
小程序都使用class定义类，在wxss文件中实现对样式的渲染
.js文件是开发中操作最多的文件
Page()是用来注册当前页面的
utils是工具类存放处
第一步就是创建app.js文件
先创建app.js文件之后再创建app.json文件
当app.json中飘红那么直接在其中写{}即可
但是有新的报错：少了pages路径
一个文件夹下管理一个页面
创建.wxml文件之后直接就是在app.json中创建了路径文件
app.json中是全局配置
index.json是局部的配置

如果想向IDE中放入图片那么我们需要在硬盘中放入

10-19号晚上学习笔记：=======================================
实现样式需要先添加name
控制台中得到的图片的宽和长是CSS像素级别的，需要进行转换
400rpx是原本的字体粗细

在app.json中设置窗口的颜色只可以使用16进制的方式

小程序中有两个事件：
冒泡事件和非冒泡事件
事件委托：将子元素的事件委托给父元素（有利于添加事件的简化），事件委托的
原理就是冒泡机制

使用bind绑定的事件不会阻止事件向上冒泡{
即：不仅触发了子元素的事件并且还会触发父元素的事件
}
使用cache绑定的事件会阻止事件向上冒泡{
不会向上冒泡
}

生命周期函数{
onload:表示的是加载的时候调用函数
onreload:
onready:表示等待的时候调用的函数
}

进程和线程的区别：
进程是：代表了程序执行一次的过程
（.exe文件说明是一个进程文件）

线程是：程序运行时候的最小单元

Chrome是一个典型的多进程的浏览器

一个CPU会快速地切换服务指针（给用户一种并行的假象）
开两个Chrome是多进程
但是一个Chrome中打开多个页面是多线程

生命周期详细解释：
打开wxml页面之后开始一个service线程，将onload 和 onready 方法（可以理解为：将两个方法再create()方法之前先执行，
因为当使用断点调试的时候出现的是即便是没有执行create()方法，在页面也出现了数据）
然后才加入队列，然后service中的create()方法之后将其调用实现，然后等待主程序（视图）的唤醒
（表示此时的等待工作做好了，即：视图线程问服务线程要数据），然后服务线程
发送初始化数据给视图线程，当视图线程拿到数据之后进行初始化渲染，渲染完毕之后
通知服务线程渲染完毕，然后服务线程开了一个onready线程（监听页面初始渲染完成），
出现顺序：onload->onShow->onready，

onload()表示的是做一些初始化工作，发送请求、开启定时器等工作

10-20号下午学习笔记（16：44分开始学习）：================================================
onHide()表示背景数据
onShow()监听页面显示（调用不止一次）
从背景到前景有一次调用onShow()方法
onDestory()表示销毁页面
onUnload()表示卸载页面

重点：总结笔记：
小程序特点：{
1.体积小
2.与app实现互补，可以实现app中基本的功能
3.开发周期短，成本较低
}

小程序的适配方案：
{
1.viewport适配器
2.单位：rpx
3.在iphone6中，1rpx = 1物理像素 = 0.5px dpr =物理像素/设备独立像素 = 2
}

重要的文件：
{
wxml view结构
wxss view样式
js view行为
json文件 view 数据和配置
}

注册小程序：
app()
注册页面：page()
数据绑定：
在data中初始化页面需要的事件，在页面可以直接使用

事件：
冒泡事件：
bind + 事件名
非冒泡事件：
catche + 事件名

重点：下午讲课笔记：
如何获取用户信息（查看api）（wx是小程序封装好的全局对象）
wx.getUserInfo() 是小程序提供的一个接口
得到用户信息需要在生命周期中的onLoad()函数中使用接口

this 指的是当前页面的实例对象
老师心得：拿到需求之后不要直接去写，而是先看需要几个板块并且需要用到什么知识点（设计代码，有一定的排错能力）
直接在success方法中使用this失败的原因是：
this肯定不是当前页面的实例调用
解决方法：
将原来的success(data){} 改成： success : (data) => {} 即可
使用button 中的open-type属性设置getUserInfo 之后实现的是点击按钮之后出现用户授权提示框，然后用户可以点击是否授权
使用openSetting()可以打开用户的设置
getSetting()可以得到用户的设置

实现用户登录逻辑：
1.使用wx.getSetting()得到用户的授权信息，从而实现对授权按钮的显示与否进行操作
2.当用户点击button弹出一个对话框实现的是让用户选择是否授权（即设置open-type属性）
3.给点击注册按钮中添加一个bindgetuseinfo属性，从而实现对用户选择监听
4.注意在实现获得用户登录信息逻辑实现的时候，将getUserInfo() 以及 getSetting()方法放到另外的一个自己定义的函数中
从而实现了当用户点击完授权按钮之后刷新的时候直接调用自定义的函数即可

10-20号晚上学习笔记：
swiper组件的使用：======================================================================================
在结构文件中根本没有引入样式的原因：微信小程序会自动寻找当前项目中的和wxml文件同名的wxss文件
直接调用wx.navigateTo() 函数实现跳转的时候填写路径问题：如果直接设置pages/logs/logs，那么在实际跳转的时候会从index
中跳转，并且前边添加了page/index 这个路径。
解决方法：在pages/logs/logs前边添加一个根目录标识：/pages/logs/logs即可。

使用navigateTo实现跳转的时候出现的是保留当前页面（也就是之前的页面还有）
使用wx.redirectTo()实现跳转的时候出现的是关闭当前界面
将app.json中的pages路径中的list提前，即实现了对list界面的刷新

设置如下wxss样式可以实现对不同设备的适配：
swiper{
width: 100%;
height: 400rpx;

}

swiper image{
width: 100%;
height: 100%;
}

/----------------------------11-4号晚上学习笔记--------------------------/
/----------------------------11-4号晚上学习笔记--------------------------/

回顾p12课程：

设置轮播图显示小点的属性是：indicator-dots
设置小点的颜色属性是： indicator-dots-color

p13笔记：
模板（template）的使用：可以在不同的地方调用。模板是可以重复使用的
使用name属性作为模板的名字

/------------------------11-6号上午学习小程序笔记------------------------/
模板是用来进行渲染的
一个模板界面只有一个结构和样式文件即可
使用实现将模板wxml文件引入wxml中
使用@import ‘’; 将样式引入到对应的wxss文件中
{
此外需要在template文件中设置template元素的属性的name值，
并在使用模板的地方使用is属性实现对模板的引用
}

p14实现的是对于模板的列表的渲染
使用： let datas = require(‘填写的是数据的路径’); 实现对于已经暴漏数据的获得
使用wx:for实现对列表的循环渲染

使用block实现包括的条件是子节点有多个的时候，只有一个的时候不需要使用
如何将数据传递给模板页面：{
使用
}

然后在template 文件中使用{{name}} 等实现对数据的填写
使用：wx:key=‘index’ 尽量使用此index得到下标

p15复习知识点学习笔记：
template中的name属性用来标识模板
使用data = ‘{{…item}}’
使用的是template 其中使用is属性
引入模板结构：
引入样式：@import ‘路径’

列表渲染：
使用的是wx:for {
需要注意的是：
}

wx:key对于每一个个体元素进行标记
遍历的个体是item
遍历的下标是：index

P16 detial详情页静态界面搭建：
小程序中推荐使用flex布局方式

/-------------------11-7号上午学习笔记---------------------------/
P16详情界面的搭建：
整体的实现步骤：先进行wxml文件的编写然后使用wxss文件对文件样式进行设置

命名规范是需要的（见名知义；小驼峰命名法等）
公司会提前进行会给一个表格，自己在定义全局变量之前一定要先看
表格中有没有自己的想要定义的变量名称

UI会给设计稿，开发人员使用设计稿对自己的界面进行设置
UI和美工不是一个人
UI比美工技术高得多
UI设计的图可以是动态的

UI会给我们：原型图还有一个是给出来具体的尺寸大小
用定位实现线条显示在图片的后边
使用position:absolute 使得该组件相对于离它最近的父元素的定位

对button来说，由于内部具有样式所以要是不写自己的样式就使用默认的样式

/-----p17detail实现静态页面数据的动态展示—/
在实现点击的时候需要知道点击的下标是哪一个，才可以实现对数据的获得
使用data-xx= ‘dataTest’ 实现对点击时间传送数据的方式之一

页面之间传值：
{可以使用的是在上一个页面中的方法中通过event得到UI界面传值
然后使用wx.navigateTo({
url:’/xx/xx/xx?index = ’ + index}
)

表示使用url传值，然后在下一个界面中的onLoad(options)函数中的options参数
可以得到的是上一个界面传过来的值
}

/----------------整体总结实现页面间的动态传值--------------------/
1.首先先设置一个模板{包含对name的定义，以及模板的布局设置等}
2.在一个页面使用该模板（wxml文件使用的是），然后使用
，然后使用的是block实现循环
使用其中的wx:for属性，以及wx:key属性等
3.在for循环内部使用的
其中对包含上述的的容器设置data-index属性指定的是向js页面中
定义的xxx(event)方法传值，从而可以实现对于用户点击那一个list元素的定位，
4.在list.js文件中设置的xxx(event)方法中使用的跳转时wx.navigateTo({url:’’})
其中获得index下标的代码是：let index = event.currentTarget.dataset.index;
然后在wx.navigateTo({url:’’})中的url属性后边添加’?index =’ + index;
5.然后在detail.js文件中通过onLoad(options) 函数得到index的值，并实现对于
页面数据元素的动态加载，从而实现了页面之间的传值

/-------------------p18currentTarget和target的区别---------------------------/
对于swiper组件来说不需要一个一个设置对应的点击事件而是可以使用事件委托机制处理
对于轮播图的监听需要在event对象中的target属性中获得前端传来元素的值

curentTarget 和 target对象的区别：
解释为什么在swiper上绑定catchTap的时候，当点击swiper-item的时候需寻找传值需要
在event中的target属性中寻找？
答：因为设置的监听器是在swiper组件上的，真正触发事件的是swiper下面的
swiper-item组件。

比较正式的解释是：{
currentTarget组件指向的是捕获事件的元素
而target指向的是触发事件的元素
}

/----------------p19收藏功能显示完成-------------------/
主要是对于UI界面的设置，实现了对UI界面提示的显示。同时，需要注意一些三目运算符
的使用以及简单逻辑的实现。

/---------------p20收藏功能的显示数据存储---------------/
目的：主要是为了解决收藏之后重新刷新的时候也不会消失。

使用wx.setStorage(OBJECT) 实现对于数据的存储
实现步骤：
1.需要在处理解决收藏逻辑以及分享逻辑的时候在函数中调用内置函数wx.setStorage()
该函数中需要设置的是data 和 key的值，
其中data表示的是设置当前需要存储的当前状态值
并且key设置的是当前对应的页面页数（也就是下标数）
重点笔记
{
/**
* ----------------对不同页面对应的状态的存储逻辑实现---------------
* obj.index = isCollected;
* 直接obj.index表示的是index是一个字符串，那么应该使用的是index下标
* 仅仅设置obj = {} 总是覆盖之前的状态，解决方案是：在每一次跳转的时候
* 需要读状态，此时读状态需要使用wx.getStorage()函数得到存储的状态的值
* **/
}
（对于let obj = datas.data 逻辑的说明：此处实现了对于数据的更新和新增）

2.最重要的一点是：当打开控制台中的storage一栏时，如果清除了所有的storage缓存
数据，那么我们在下一次使用wx.getStorage()函数得到数据的时候就会无法得到
解决方案：
进行预处理工作{
//在onLoad函数中进行判断是不是为空的
if(!detailStorage){
// 在缓存中初始化空对象
wx.setStorageSync(‘isCollected’, {})
}
}

上述思路是将所有的页面都存到一个对象中，然后实现的是对一个整体对象的操作，
比较方便，但是如果是每一次一个页面都是一个对象的话也可以就是操作起来不方便
因为每一次删除的时候都需要一个一个删除

/--------------p21音乐播放功能的实现（截止到10’25’’）--------------/
使用三元表达式实现对于播放按钮的实现
实现音乐播放功能：
使用wx.playBackgroundAudio(OBJECT) 函数实现背景播放音乐
使用的是音乐链接：dataUrl

/--------------------11-11日上午学习笔记------------------/
调用wx.pauseBackgroundAudio()函数直接实现暂停音乐播放
出现的问题：
当使用自己定义的函数播放背景音乐的时候是可以控制播放和暂停的。
但是当使用小程序自带的播放控制器的时候对它的控制不会反映到我们自己定义的
控制器中，所以需要监听背景音乐是否在播放。

设置监听需要在用户加载出当前页面并在点击播放按钮之前进行。
其中使用wx.onBackgroundAudioPlay() 用来监听背景音乐的播放
使用 wx.onBackgroundAudioPause() 用来监听背景音乐的暂停

在app.js文件中操作：
需要两个参数在data:{}中，isMusicPlay 和 pageIndex
使用getApp()获得小程序的示例，可以操纵其中的数据

逻辑实现：
当得到appData的时候需要将当前音乐的播放状态存储到app中
可以将一些变量标识放到公共区域，从而使得该页面中的数据被共享

在暂停的时候不需要更改appData中的pageIndex下标：
因为是之前播放的时候才可以点暂停，所以在播放的时候已经记录了
页面的下标，故不用记载了。

/----------------------p22 11-11 下午学习笔记----------------------/
复习知识点：

//小程序缓存机制：
getStorage()
setStorage()

同步阻塞异步不阻塞

异步任务都有回调函数:

1.缓存的是用户是否收藏当前文章
注意：
1.缓存之前应该先获取之前的缓存的数据
2.缓存的新数据实在原有数据的基础上进行的
3.当页面加载的时候需要在onLoad()中获取本地缓存的数据（动态修改当前页面是否收藏文章的状态）
4.如果storage中没有缓存过通过key获得的值value为空！
5.如果用户之前没有缓存过的话，初始化一个空的对象在storage中

音乐播放：
1.如何知道音乐是不是在播放或者是暂停
2.将播放音乐的页面状态缓存到addData中

重点：微信或者其他的手机app长时间没有清缓存会变得特别卡，就是因为这个原因

最直接清除缓存的方法是：
wx.clearStorage() 清除本地用户缓存，指的是清除本地磁盘上的数据

/----------------p24 分享功能的实现-------------------/
显示操作菜单使用的是：wx.showActionSheet(OBJECT)
但是点击itemList数组中的选项之后不会实现分享功能，因为不是VIP用户，只是普通用户
设置button 中的open-type属性设置为share表示的是为当前页面设置分享功能

/---------------------p25 tab切换功能-------------------------/
tabBar的使用：
最小个数是2个，最多是5个
在tabBar中的属性有list:[] 其中数组中有多个对象
每一个对象表示的是一个tabBar

/-----------------------p26 发送ajax请求实现数据交换功能------------------/
发送ajax请求实现数据交换功能：
发送网络请求：
使用的是request。
但是需要设置小程序的地址请求：
因为：小程序出于安全考虑所有的协议都是https协议，并且如果没有在开发设置中配置请求
链接是无法访问指定的链接的。
一个微信小程序的并发网络请求数量被限制在最多5个

如果使用的api接口是http的，那么可以在项目设置中将不校验安全性勾选上即可

/-------------------p27 电影详情页完成---------------------/
在使用的时候不需要写最后的
后缀.wxml

在url后边使用index = {{item}} 的时候会自动将后边传过去的数据转换为字符串形式

使用appData实现对于数据的共享

注意：小程序一般不进行视频的播放，一般都是跳转到公众号平台进行播放

在整体实现完之后，原来设置的navigator单击跳转到一个新的界面的时候，
需要要求的是跳转到的这个页面不可以是tabbar界面

解决方案：使用wx.switchTab(OBJECT) 实现的是跳转到tabbar页面，并关掉非tabbar页面

小程序学习笔记（1）相关推荐

小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
微信小程序学习笔记（一）
干货来袭基础前言微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
小程序 - 学习笔记
一.小程序文档笔记默认开发目录开发目录解析 1. app.js.app.json.app.wxss 这三个文件必须有不能删掉. 一个小程序主体部分由这三个文件组成,而且必须放在项目的根目录 j ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
微信小程序学习笔记02：微信小程序注册
文章目录零.学习目标一.小程序注册方法 1.注册 2.登录二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...

小程序学习笔记（1）

小程序学习笔记（1）相关推荐

最新文章

热门文章