Skip to content

Commit bfa71b7

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
update
1 parent 589f52a commit bfa71b7

File tree

7 files changed

+47
-26
lines changed

7 files changed

+47
-26
lines changed

‎12-移动端/03-miniprogram/pic/08.png‎

-104 KB
Loading

‎12-移动端/03-miniprogram/pic/09.jpg‎

-737 KB
Loading

‎12-移动端/03-miniprogram/pic/10.jpg‎

-385 KB
Loading

‎12-移动端/03-miniprogram/pic/11.jpg‎

-33.6 KB
Loading

‎12-移动端/03-miniprogram/小程序开发总结-常用技巧.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

12-移动端/03-miniprogram/小程序开发总结-第三方组件和小程序插件使用.md renamed to 12-移动端/03-miniprogram/小程序开发总结-开发技巧和第三方插件的使用.md

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,42 @@
1-
# 小程序开发总结 - 第三方组件和小程序插件使用
1+
# 小程序开发总结 - 开发技巧和第三方插件的使用
22

3-
## 1. 富文本的显示
3+
## 1. 使用Promise处理异步接口
4+
5+
es6的Promise让异步接口的处理变得轻松，在旧版本的小程序中并不原生支持Promise，需要引入第三方库，例如：[https://github.com/stefanpenner/es6-promise](https://github.com/stefanpenner/es6-promise)，然而在新版的小程序中已经原生支持了Promise，直接使用即可。
6+
7+
```
8+
// 从服务端获取用户登录信息，此处仅作演示，实际使用需要本地存储，避免频繁调用线上接口
9+
const getUserInfo = () => {
10+
return new Promise((resolve, reject) => {
11+
wx.request({
12+
url: 'https://xxxxx/login',
13+
data: {},
14+
success: (res) => {
15+
resolve(res);
16+
},
17+
fail: () => {
18+
reject();
19+
}
20+
})
21+
})
22+
}
23+
```
24+
25+
同步处理后续命令
26+
27+
```
28+
getUserInfo().then((res)=>{
29+
let userInfo = res;
30+
});
31+
```
32+
33+
## 2. 富文本的显示
434

535
小程序中经常需要展示资讯类信息，解析富文本有两种有效的方式：官方的rich-text富文本组件和wxParse组件。
636

737
![](pic/01.jpg)
838

9-
### 1.1 rich-text
39+
### **rich-text**
1040

1141
rich-text富文本组件是小程序1.4.0版本后推出的，可以通过js脚本把html解析成一定格式的nodes，然后在 rich-text 中显示。详细教程见官方文档：[https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)，但是这个组件存在一下一些问题：
1242

@@ -16,7 +46,7 @@ rich-text富文本组件是小程序1.4.0版本后推出的，可以通过js脚
1646

1747
因此，更推荐第二种渲染富文本的方式——wxParse组件
1848

19-
### 1.2 wxParse组件（推荐）
49+
###**wxParse组件（推荐）**
2050

2151
wxParse是专门用于微信小程序的富文本解析组件，它支持Html及markdown等转wxml可视化，github地址：[https://github.com/icindy/wxParse](https://github.com/icindy/wxParse)，github中已有详细的教程，此处简单总结下配置流程：
2252

@@ -46,7 +76,7 @@ wxParse是专门用于微信小程序的富文本解析组件，它支持Html及
4676
<view><template is="wxParse" data="{{wxParseData:article.nodes}}" /></view>
4777
```
4878

49-
## 2. 图标字体的使用
79+
## 3. 图标字体的使用
5080

5181
微信小程序开发，可以像web开发使用字体图标，但是只是支持Unicode字体
5282

@@ -96,13 +126,13 @@ wxParse是专门用于微信小程序的富文本解析组件，它支持Html及
96126
97127
98128
99-
## 3. 使用WeUI，统一UI样式
129+
## 4. 使用WeUI，统一UI样式
100130
101131
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含`button`、`cell`、 `dialog`、 `progress`、 `toast`、 `article`、 `actionsheet`、 `icon` 等各式元素，github地址：[https://github.com/Tencent/weui-wxss](https://github.com/Tencent/weui-wxss)，内含详细使用教程，简单来说，样式文件中引入 `dist/style/weui.wxss` 即可
102132
103133
104134
105-
## 4. 接入腾讯视频插件
135+
## 5. 接入腾讯视频插件
106136
107137
github地址：[https://github.com/tvfe/txv-miniprogram-plugin](https://github.com/tvfe/txv-miniprogram-plugin)
108138
@@ -183,7 +213,7 @@ Page({
183213
184214
185215
186-
## 5. 使用 moment.js 处理日期 & 汉化
216+
## 6. 使用 moment.js 处理日期 & 汉化
187217
188218
![](pic/07.jpg)
189219

‎12-移动端/03-miniprogram/小程序开发总结-开发流程规范.md‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 小程序开发总结 - 开发模式
1+
# 小程序开发总结 - 模块化开发流程规范
22

33
## 1. 小程序与H5的开发成本对比
44

@@ -16,9 +16,7 @@ H5开发者深有体会，在编写代码时经常遇到兼容性问题，尤其
1616

1717
开发H5时，完成响应式前端的成本较高，然而小程序只需考虑移动端布局即可，而且官方首推使用flex布局，使得前端布局轻而易举。此外，小程序提供了新的计算单位`rpx`，整个页面宽度被固定为750rpx，开发者对于界面的布局真正做到了随心所欲。
1818

19-
## 2. 模块化开发
20-
21-
### 2.1 模块化优势1 — 组件复用
19+
## 2. 模块化优势1 — 组件复用
2220

2321
和前端框架vue相似，新版本的小程序已经支持了模块化开发，所谓的模块化开发指的是将复杂的页面拆分为各个组件单独进行开发，模块化的开发模式使得代码逻辑清晰，代码充分复用，减少了开发成本。
2422

@@ -69,11 +67,11 @@ H5开发者深有体会，在编写代码时经常遇到兼容性问题，尤其
6967

7068
其中的组件单独进行开发即可，一次开发，多次使用
7169

72-
### 2.2 模块化优势2 — 代码逻辑清晰、便于维护
70+
## 3. 模块化优势2 — 代码逻辑清晰、便于维护
7371

7472
模块化的另一大优势，代码逻辑结构、便于维护，将大段的代码分拆成多个组件，每个组件内只存放组件本身的代码，使得整体代码逻辑清晰，便于维护。
7573

76-
### 2.3 模块化开发规范 — 文件组织
74+
## 4. 模块化开发规范 — 文件组织
7775

7876
![](pic/11.jpg)
7977

@@ -88,11 +86,11 @@ H5开发者深有体会，在编写代码时经常遇到兼容性问题，尤其
8886
1. common类组件和form表单类组件是项目中频繁使用的组件，对于这类组件，开发者需要花费更多的精力打磨细节，设置更多参数，以适应不同的场景
8987
2. 纯粹的业务相关的组件由于功能特殊，往往不会复用，之所以分离作为组件，一般是因为业务逻辑复杂，单独作为组件有利于简化父页面的代码逻辑，这类组件只需要满足需求即可。
9088

91-
### 2.4 模块化开发规范 — 命名规则
89+
## 5. 模块化开发规范 — 命名规则
9290

9391
良好的命名是对组件最好的注释，组件代码中变量函数的命名不必多说，对于自定义组件名称，统一以 `cs` 开头，区别于系统组件；为了统一组件名与wxml中的组件引用名，所有组件全部用小写字母命名，以下划线`_`隔词。
9492

95-
### 2.5 模块化开发规范 — 自定义组件的配置与使用
93+
## 6. 模块化开发规范 — 自定义组件的配置与使用
9694

9795
官方文档见：[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
9896

@@ -127,7 +125,7 @@ H5开发者深有体会，在编写代码时经常遇到兼容性问题，尤其
127125
</view>
128126
```
129127

130-
### 2.6 模块化开发规范 — 减少组件耦合
128+
## 7. 模块化开发规范 — 减少组件耦合
131129

132130
![](pic/10.jpg)
133131

@@ -138,7 +136,7 @@ H5开发者深有体会，在编写代码时经常遇到兼容性问题，尤其
138136
3. page页面中从服务端拉取数据，经过adapter处理，由组件负责渲染；
139137
4. 组件中涉及修改服务端数据的事件，全部交由page页面处理，触发page中对应的事件
140138

141-
#### **组件通信 - 页面向组件传参**
139+
### 组件通信 - 页面向组件传参
142140

143141
页面引用自定义组件，参数直接作为属性传递，下面引用的是一个名为"cs-xiaoyao"的组件，注意参数命名方式
144142

@@ -175,7 +173,7 @@ Component({
175173
})
176174
```
177175

178-
#### 组件通信 - 组件调用父页面方法
176+
### 组件通信 - 组件调用父页面方法
179177

180178
组件只负责数据的渲染显示，组件中涉及修改服务端数据的事件，全部交由page页面处理，触发page中对应的事件
181179

@@ -214,5 +212,3 @@ cancel(event) {
214212
}
215213
```
216214

217-
## 3.
218-

0 commit comments

Comments
 (0)