小程序直播课笔记

2018-12-19 本文已影响28人这真的是一个帅气的名字

思维导图软件

xmind

在线的导图网站

https://processon.com

密码管理软件

1password

注册地址

https://mp.weixin.qq.com/wxopen/waregister?action=step1

小程序账号的登陆地址

https://mp.weixin.qq.com/

得到 AppID

后台 -> 设置 -> 开发设置 -> AppId

目录结构

pages 小程序的页面
utils 工具包
app.js 逻辑代码区
app.json 小程序配置
app.wxss 小程序的样式文件
project.config.json 项目的配置文件

页面目录结构

.js 逻辑区. 数据, 事件
.json 配置文件
.wxml 页面结构
.wxss 当前页面的样式

关于配置

标题的背景颜色设置必须要使用 16 进制的方式进行设置

"navigationBarBackgroundColor": "#000",

在小程序中使用 view 标签布局. 不要使用 div

关于默认打开

小程序会默认打开 pages 中第一个页面的内容

在配置完 pages 之后, 小程序会自动为我们创建新的页面

关于配置和样式的优先级

就近原则, 离谁近, 谁就生效

关于小程序尺寸单位

rpx 整个屏幕的总宽度是 750rpx
1px == 2rpx

关于小程序的一些资源

https://github.com/justjavac/awesome-wechat-weapp

常用组件

view 相当于 div
scroll-view 滚动组件
swiper 轮播组件
text 相当于 span 标签
navigator 相当于 a 标签
image 相当于 img 标签

关于语言学习

环境
hello world
变量
数据类型
类型转换
运算符 (算字赋比逻位)
流程控制 (if else )
循环控制 (for while)
函数数组
面向对象.
包管理工具 (composer npm pip)

关于跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- html 跳转 -->
    <a href="">首页</a>
    location.href = 'http://www.baidu.com';
    location.replace('http://www.baidu.com');
    <!-- html 跳转 -->

    <!-- 小程序 -->
    <navigator  url="../../index">首页</navigator>
    wx.navigateTo();
    <!-- 小程序 -->
</body>
</html>

swiper 要和 swiper-item 一起使用, 类似于原来的 ul 和 li

QQ 输入法

中文状态下使用英文标点
QQ 剪切板

粘贴和复制的快捷键

ctrl + insert 复制
shift + insert 粘贴

软件介绍

clover

关于遍历

foreach($users as $k=>$v){

}

<view wx:for="{{[1,2,3,4]}}">
    {{key}}   {{item}} 
</view>   
    
    ||
    ||
    ||
    \/

<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>

三元运算符

{{item.id == activeChannel ? 'active' : ''}}

网络请求的报错

VM2857:1  http://c.m.163.com 不在以下 request 合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

解决方案

设置 -> 项目设置 -> 勾选 不校验合法域名

vue 前端框架

新闻列表的接口地址

http://c.m.163.com/nc/article/headline/data/10-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore

事件的传参

当事件触发之后, 如果需要将参数传递给事件处理函数, 应该在标签中加入属性
data-* 属性

data-id
data-name
data-age

然后就可以在事件的处理程序中获取该参数
e.currentTarget.dataset.id
e.currentTarget.dataset.name
e.currentTarget.dataset.age

json 解析网站

http://json.parser.online.fr/

动态数据的解析

that.setData({[key]: res.data.data })