小程序篇-小程序

//

该文章记录小程序开发中一些具体功能的实现:

推荐学习参考地址：https://developers.weixin.qq.com/miniprogram/dev/api/

项目案例:https://github.com/chengjiaz/zjcChat     分支:dev

说明:这个项目实现了一下基本的功能,包含：数据库交互，案例演示

6-8之后更新的内容在最下面

//

年份：2018

日期：6-8

功能:小程序获取globalData数据

步骤1

app.js 定义

步骤2

js使用

2.1

2.2

说明:

在2.2.图片中的1与globalData中定义保持一致

日期：6-4

功能:小程序传参数

分类:1 传递包含类类型参数

1.1

js:参数定义

定义：接受类的参数[示例:let params={}]

定义：接受类类型的参数[示例:let classAttr={}]

参数存放:[示例:params['classAttr']=classAttr;]

说明:classAttr=类属性

分类：2 不包含类类型参数

2.1 可以直接在url后面拼接

说明:采用此方式在controller层中需要添加注解@requestBody

日期：6-1

功能:小程序调用utils中的方法

步骤1 js引入

步骤2 方法调用

utils中方法展示：

日期：5-17

开发建议:[一个js 引用其他js,层级控制在5层之内]

日期：5-16

开发测试方式:

在小程序页面中有预览按钮,点击该按钮生成二维码,然后扫码之后可以看到程序结果

附图:

 

日期：5-15

功能:加载页面时显示loading

实现:在对应的方法中添加如下方法即可

wx.showLoading({ 

title: 'XXXXXXXX',

})

XXXXXXXX=“自定义提示语句”

页面加载结束隐藏loading

wx.hideLoading()

日期：5-11

知识点:跳转

方式1

wxml使用标签

<navigator></navigator>

方式2 

绑定事件

2.1

2.2

特殊跳转方法：跳转首页

//关于跳转的详细说明:

1> wx.redirectTo() , 关闭当前页面，跳转到非tabBar的某个页面;

2>wx.switchTab ，跳转到tabBar的某个页面

3>wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;

日期:5-10

知识点讲解:var let const的区别

var->全局声明变量。

let->局部变量。

const->常量

日期：5-9

知识点讲解：自定义属性：

实现方式：data-*

*表示：自定义属性名称

注意：* 需要全部小写

使用演示：

1 设值：

2 取值

3结果

日期：5-9

知识点讲解:循环：

使用演示:

步骤1定义：

js中定义:

arrcy:[

{

属性：属性值,

属性：属性值

}

]

备注:以逗号分隔

步骤2 循环:[wx:for/wx:for-item]

备注：

wx:for: 循环对象

wx:for-item:用于定义循环别名

3 取值

 .属性

日期：5-8

理论知识点:

微信小程序概述
1 结构
功能级别：-功能(文件夹)[一定要包含]
.js-逻辑交互
.json-
.wxml-类似jsp 页面
.wxss-类似css 页面样式控制
项目级别：
app.js
app.json->pages--管理页面
app.wxss->样式
project.config.json -
2
组件
基础组件：
视图容器/基础内容/表单/导航/多媒体/地图/画布
<view></view>-类似于div
包含jsp常见的组件:button,radio,checkbox,
富文本：<rich-text></rich-text>等等
2.1
属性类型
Boolean/Number/String/Array/Object/EventHandler/Any
2.2
共同属性类型
id/class/style/hidden/data-*/bind* / catch*

//

这个是分隔，6-8之后跟新的内容在下面

//

10-1

1>小程序中集合的常见操作

shift:从集合中把第一个元素删除，并返回这个元素的值。

unshift: 在集合开头添加一个或更多元素，并返回新的长度

push:在集合中添加元素，并返回新的长度

pop:从集合中把最后一个元素删除，并返回这个元素的值。

日期:10-2

1>小程序中的事件

a>定义

事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息，如 id, dataset, touches

b>类型

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

c>绑定

bind/catch区别

bind事件绑定不会阻止冒泡事件向上冒泡，

catch事件绑定可以阻止冒泡事件向上冒泡

日期:10-3

1>小程序中，多媒体包含:

a>image

b>audio

c>video

日期:10-12

1>小程序清除左右浮动

Clear:both;

2>小程序内容换行

A: white-space:pre-wrap

B: white-space:pre-line

3>小程序添加下划线

border-top:1px #111 dashed; 高度、颜色、虚线

border-bottom: 1px #000 solid; 高度、颜色、实线

4>小程序图片圆形展示

border-radius: 25px;

日期：10-15

1>小程序删除项目

a:打开开发者工具里面选择项目管理

b:管理项目页面

进行页面勾选，勾选需要删除的项目