[移动开发]小程序开发学习笔记

?小程序

• 小程序与普通网页开发的不同

1. 运行环境不同

网页运行在浏览器中

小程序运行在微信环境中

1. API不同

由于运行环境不同，所以小程序中无法调用DOM和BOM的API。但是，小程序可以调用微信环境提供的各种API，例如：地理定位，扫码，支付

1. 开发模式不同

网页的开发模式：浏览器+代码编辑器

小程序有自己一套标准开发模式：申请开发账号+安装小程序开发工具+创建和配置小程序项目

• 开发者工具

1. 开发者工具功能

1. 快速创建小程序项目
2. 代码的查看和编辑
3. 对小程序功能进行调试
4. 小程序的预览和发布

2、开发者工具快捷键

1. Ctrl+1-9：在打开文件之间切换
2. Ctrl+Shift+F:在文件中查找
3. Ctrl+J:切换面板
4. Ctrl+Shift+Alt+B:切换侧边栏可见性
5. Ctrl+K+C:注释
6. Ctrl+K+U取消注释

• 认识小程序

1. 项目的基本组成结构

• Pages用来存放所有小程序的页面
• Util用来存放工具性质的模块（例如：格式化时间的自定义模块）
• App.js小程序项目入口
• App.json小程序项目的全局配置文件
• App.wxss小程序项目的全局样式文件
• Project.config.json项目的配置文件
• Sitemap.json用来配置小程序及其页面是否允许被微信索引

1. 小程序页面页面的组成部分

.js文件（页面的脚本文件，存放页面的数据，事件处理函数等）

.json文件（当前页面的配置文件，配置窗口的外观，表现等）

.wxml（页面的模板结构文件）

.wxss（当前页面的样式表文件）

• 新建页面

在app.json中找到pages节点，然后增加一项

• WXML模板

1. WXML与HTML的区别

• 标签名称的不同

1. HTML（div，span，img，a）
2. WXML（view，text，image，navigator）

• 属性节点的不同

1. <a href=”#”>超链接</a>
2. <navigator url=”pages/home/home”></navigator>

• 提供了类似于Vue中的模板语法

1. 数据绑定
2. 列表渲染
3. 条件渲染

• 什么是WXSS

1. WXSS是一套样式语言，用于描述 WXML的组件样式，类似于网页开发中的CSS
2. WXSS和CSS的区别

• 新增rpx尺寸单位

1. CSS中需要手动进行像素单位换算，例如rem
2. WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

• 提供了全局的样式和局部样式

1. 项目根目录中的app.Wxss会作用于所有小程序页面
2. 局部页面的.WXSS样式仅对当前页面生效

• WXSS仅支持部分CSS选择器

1. .class和#id
2. Element
3. 并集选择器、后代选择器
4. ::after和::before等伪类选择器

• JS逻辑交互

1. 小程序中的JS文件分类

• App.JS

1. 是整个小程序项目的入口文件，通过调用APP（）函数来启动整个小程序

• 页面的.JS文件

1. 是页面的入口文件，通过调用Page（）函数来创建并运行页面

• 普通的.JS文件

1. 是普通的功能模块文件用来封装公共的函数或属性供页面使用

• 小程序组件的分类

1. 视图容器
   1. View

1. 普通视图区域
2. 类似HTML中的div，是一个块级元素
3. 常用来实现页面布局效果
   1. Scroll-view

1. 可滚动的视图区域
2. 常用来实现滚动列表

WXML[

<Scroll-view class=”container”??scroll-x ?scroll-with-animation=’ture’>

<view>A</view>

<view>B</view>

<view>C</view>

</scroll-view>

]

WXSS[

.container view{

Width:100px;

Height:100px;

Text-align:center;

Line-height:100px;

}

.container?view:nth-child(1){

??margin-right:?30rpx;

??display:?inline-block;

??background-color:lightgreen;

}

.container?view:nth-child(2){

??margin-right:?30rpx;

??display:?inline-block;

??background-color:brown;

}

.container?view:nth-child(3){

??display:?inline-block;

??background-color:deeppink;

}

.container?{

??border:1px?black;

??width:100px;

??height:?300px;

??white-space:?nowrap;

}?

]

1. 1. swiper和swiper-item
2. 轮播图容器组件和轮播图item组件

1. 基础内容

• Text

1. 文本组件
2. 类似于HTML中的span标签，是一个行类元素
3. 通过text组件的selectable属性，实现长按选中文本内容的效果

• Rich-text

1. 富文本组件
2. 支持把HTML字符串渲染为WXML结构

1. 表单组件
2. 导航组件
3. 媒体组件
4. Map地图组件
5. Canvas画布组件
6. 开放能力
7. 无障碍访问
8. 其他组件

• Button

1. 按钮组件
2. 功能比HTML中的button按钮丰富
3. 通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户权限，获取用户信息等）

1. ??<button>普通按钮</button>
2. ??<button?type="primary">主色调按钮</button>
3. ??<button?type="warn">警告按钮</button>
5. ??小尺寸<button?size="mini">普通按钮</button>
6. ?小尺寸?<button?type="primary"?size="mini">主色调按钮</button>
7. ??小尺寸<button?type="warn"?size="mini">警告按钮</button>
8. ??小尺寸镂空<button?size="mini">普通按钮</button>
9. ?小尺寸?镂空<button?type="primary"?size="mini">主色调按钮</button>
10. ??小尺寸镂空<button?type="warn"?size="mini">警告按钮</button>

• Image

1. 图片组件
2. Image组件默认宽度约300px，高度约240px

• Navigator

1. 页面导航组件
2. 类似于HTML中的a链接

• API

1. API分类

• 事件监听API

1. 特点：以on开头，用来监听某些事件地触发
2. 举例：wx.onWindowRessize(function callback)监听窗口尺寸变化的事件

• 同步API

1. 特点一：以Sync结尾的API是同步API
2. 特点二：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
3. 举例：微信。setStorageSync(‘key’,’value’)向本地储存中写入内容

• 异步API

1. 特点：类似于jQury中$.ajax(options)函数，需要通过success,fail,complete接收调用结果
2. 举例：微信.request()发起网络数据请求，通过success回调函数接收数据

十、不同项目成员对应的权限

• 开发者权限：可使用小程序开发者工具及对小程序的功能进行代码开发
• 体验者权限：可使用体验版小程序
• 登录权限：可登录小程序管理后台，无需管理员确认
• 开发设置：设置小程序服务器域名，消息推送及扫描普通链接二维码打开小程序
• 腾讯云管理：云开发相关设置

• 数据绑定

1. 数据绑定的基本原则

• 在data中定义数据

Page({

Data: {

//字符串类型的数据

Info: ‘init data’,

// 数组类型的数据

MsgList: [{msg: ‘hello’},{msg: ‘world’}]

}

})

• 在wxml中使用数据

在data中的数据绑定 到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

<view>{{ 要绑定的数据名称 }}</view>

• 代码

.js[??data:?{

????info:?'hello??mia',

????imgSrc:?'http://www.itheima.com/images/logo.png',

????randomNum:?Math.random()/*生成0-1的随机小数*/.toFixed(2)/*保留小数点后两位*/*10

??},

.wxml[ <view>{{info}}</view>

<image?src="{{imgSrc}}"?mode="widthFix"></image>

<view>随机数：{{randomNum}}</view>

<view>随机数的一百倍：{{randomNum?*?100}}</view>

<view>{{?randomNum?>=5???'随机数字大于或等于五'?:?'随机数字小于五'?}}</view>??

• 事件绑定

1. 什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

?2、小程序常用的事件

?3、事件对象的属性列表

4、target和currentTarget的区别

Targe是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下：

<view?class="outer-view"?bindtap="outerHandler">

?? <button?type="primary">按钮</button>

</view>

如上代码，点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。

此时，对于外层的view来说：

e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件

e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

5、bindtap使用

.wxml[

//定义一个按钮，及事件处理函数

<button?type="primary"?bindtap="CountChange">+1</button>

]

.js-data[

定义一个变量并赋值

count:0

]

.js[

//按钮点击事件处理函数

??CountChange(){

//事件触发时打印OK

???? console.log('OK'),

//事件触发时变量数值+1

??? ?this.setData({

?????? count:?this.data.count?+1

???? })

?? },

]

6、传参格式

<button bindtap=”btnHandler” ?data-info=”{{2}}”>按钮</button>

Info为参数名称，2为参数

7、为data中的数据赋新值

Count:this.data.count + 1

十二、条件渲染

1、if语句

//如果count=1，则创建view显示男

<view?wx:if="{{count===1}}">男</view>

//如果count=2，则创建view显示女

<view?wx:elif="{{count===2}}">女</view>

//否则创建view显示保密

<view?wx:else???>保密</view>

2、使用block标签一次控制多个组件的展示与隐藏

<block wx:if=”{{true}}”>

<view></view>

<view></view>

<view></view>

</block>

注：控制条件复杂时推荐使用

1. hidden=”{{condition}}”控制组件的显示与隐藏

<view hidden=”{{flag}}”>条件为true隐藏，条件为false显示</view>

注：频繁切换时使用

十三、列表渲染

1. 数组定义

.js.data[

arr:?['苹果',?'小米',?'华为'],

userList:?[

??????{id:1,name:'小红'},

??????{id:2,name:'小黄'},

??????{id:3,name:'小白'},

????]

]

1. wx:for

<view?wx:for="{{arr}}">

??索引是：{{index}},item是：{{item}}

</view>

<view?wx:for="{{userList}}"?wx:key="id">{{item.name}}</view>

十四、wxss

1、屏幕总宽：750rpx

2、样式导入格式：

@import?"/common/common.wxss";

1. 内边距属性：padding 就是内边距，就是说控制上下左右的边距，让界面感觉没有那么拥挤。
2. 外边距属性：margin
3. 全局样式与局部样式
   1. 全局样式:app.wxss
   2. 局部样式:具体页面.wxss

十五、全局配置

1、了解window节点常用的配置项

2、TabBar节点属性

3、每个tab项的属性

1. 警告关闭：

Project.config.json->setting->增加”checkSiteMap”:false

十六、导航

1、声明式导航

导航到tap页面

<navigator?url="/pages/message/message"?open-type="switchTab">导航到消息页面</navigator>

导航非tap页面

<navigator?url="/pages/info/info"?open-type="navigate">导航到info页面</navigator>

回退

<navigator?open-type="navigateBack"?delta="1">后退</navigator>

1. 编程式导航

跳转到tap页面

<button?bindtap="gotoMessage">跳转到message页面</button>

??gotoMessage(){

????wx:wx.switchTab({

??????url:?'/pages/message/message'

????})

??},

跳转到非tap页面

<button?bindtap="gotoInfo">跳转到Info页面</button

??gotoInfo(){

????wx:wx.navigateTo({

??????url:?'/pages/info/info'

????})

??},

后退

<button?bindtap="gotoback">后退</button>

??gotoback(){

????wx.navigateBack({

??????delta:?1,

????})

??},

• 传参

1. 参数与路径之间用？隔开
2. 参数健与参数值用=相连
3. 不同参数用&分隔

1. 声明式传参

<navigator?url="/pages/info/info?name=张三&age=20">跳转到info页面</navigator>

1. 编程式传参

• loading效果

1. 展示

wx.showLoading({

??????title:?'数据加载中...',

????})

1. 隐藏

complete:()=>{

????????wx.hideLoading()

????????this.setData({

??????????isloading:false

????????})

??????}

????})

注：不知道为什么，从后端传上来的图片在开发者工具上面可以展现，但是在真机上面却展示不出来。