请选择 进入手机版 | 继续访问电脑版
查看: 454|回复: 0

[工具答疑] 一文带你看懂新上线的"智能小程序扩展能力"

[复制链接]
发表于 2020-4-17 18:25:29 | 显示全部楼层 |阅读模式
1. smart-ui组件篇
团队里没有UE/UI?想找一些和百度APP统一的图标库但是找不到?想做一个自定义的下拉刷新,可是各种回弹效果总不满意?
这事儿包我们身上了,智能小程序团队推出的smart-ui组件库,是一套开发、设计风格统一的智能小程序扩展组件库,由百度智能小程序团队为小程序量身定制,以增强开发者开发体验。可以直接在你的小程序中引入。
1.1 smart-ui中都有什么好东西?1.1.1 feed 信息流(信息流组件,可配置下拉刷新、列表加载、上滑加载功能,适用于列表信息展示。真正的,我们帮你实现了架子,你来填充内容~~~)
1.1.2 feed-item信息流子项(除了架子,我们也帮你写了一些做信息流常见的内容,可以直接套在上一个组件里面哦~~~包括左文右图、纯文本、上文下图、多图及视频模式)
1.1.3 icon图标(你想要的icon这里可能都有~~也有彩色的哦,在开发者工具中有搜索,再也不用自己去搞svg了)
1.1.4 refresh刷新(自定义你的下拉刷新,可以用在页面中任意位置哦,不用放在整个页面的上面)
1.1.5 spin 加载(“点击加载更多”的组件实现,拥有点击加载、正在加载、加载完成、重新加载四种状态哦)
1.1.6 page-status 页面状态组件(拥有页面异常-有操作、页面异常-无操作三种页面状态。我们帮你实现一套无缝对接百度APP的状态模板~~~)
1.1.7 navigation 顶部导航bar(可自定义的顶部导航bar,我们帮你规定好了顶bar“安全区”,你只需要填充内容,再也不用担心冲撞“回退”与“胶囊”了)
如果以上组件中,正好有你想用的组件,那么我们一起用起来,和我一起舞动你们的双手:

1.2 使用方式
第一步:打开你想编辑的页面的swan文件第二步:打开右侧的编辑面板第三步:选择一个你想要的组件,点击插入按钮第四步:直接查看效果,如图1.2.1
图1.2.1
图形化编程你值得拥有

1.3 独立安装使用
哼哼,那么不用工具的图形化插入,就没法安装组件了吗?那我用的是自己的编辑器怎么办?我要在编译机上安装依赖怎么办?你有没有想过…..诶?NPM也能直接安装啊?
没错,npm也能直接装:第一步:在官网上找到你想使用的组件https://smartprogram.baidu.com/docs/develop/extended/ui_component/info/
第二步:在你的小程序目录下,安装@smt-ui/component
npm install @smt-ui/component
(TIPS:一定要在小程序的目录下哦,和app.json同级的那个)第三步:在想用组件的页面的json文件中,配置usingComponent
// 项目目录结构├── app.js├── app.json├── project.config.json└── pages└── home├── home.swan├── home.css├── home.js└── home.json└── components└── custom├── custom.swan├── custom.css├── custom.js└── custom.json
目录如上,假如要在home.swan中使用icon组件的话,在home.json中配置:
{    "usingComponents": {        "smt-icon": "@smt-ui/component/src/icon"    }}
第四步:在你想编辑的页面的swan文件中,使用icon组件,填写代码如下:
<smt-icon name="arrow-left"></smt-icon>
你就会发现你的界面中多了一个可爱的图标(如图1.3.1)
图1.3.1

1.4 你还需要知道的
当我们点击了工具右侧栏的一个“组件插入”到底发生了什么?其实当你点击“添加”按钮之后,工具也会检测你的小程序代码里,有没有已经安装@smt-ui/components,如果已经安装了且已经是最新的stable版,则工具会直接帮你插入代码到你页面的json/swan中如果发现你并没有在你的小程序工程下安装@smt-ui/components,则会帮你执行一下npm install @smt-ui/components,然后再帮你插入代码到你页面的json/swan中。如图1.4.1
图1.4.1

2. smart-ui模板篇
项目需求突然提,产品UE比较急,网上到处找模板,
想整个拷过来一个现成的页面,然后改一改就上线?没创建过各种类型的小程序不知道从哪儿写起?现在你有了smart-ui模板,可以直接初始化一个特定的小程序,改一改就能上线了:
2.1 smart-ui模板中都有什么好东西?2.1.1 图文详情页(我们帮你写好了一个图文落地页,hmmm,做新闻页面的同志们有福了,可以改一改,作为自己的新闻页面了)
2.1.2 信息流模板(想做feed流的应用?我们来帮你,我们写好了feed流的基本代码,包含下拉刷新、加载、多种信息流子项)
2.1.3 页面状态模板(loadingStatus加载中,noWifiStatus无网络,noContent暂无内容,这些非常通用的页面我们也帮你写好了)

2.2 使用方式
第一步:打开开发者工具,点击“页面模板”,选择相应的模板即可初始化一个工程,如图2.2.1、图2.2.2(TIPS:也可以选择多个模板,工具会为你拼合这些模板而初始化一个小程序)
图2.2.1
图2.2.2
2.3 独立安装使用
与组件一样,我们的模板也会发布到NPM上,以page-content-detail为例:第一步:npm i @smt-ui-template/page-content-detail第二步:进入到node_modules/@smt-ui-template/page-content-detail中,将@smt-ui-template-content-detail文件夹拷贝到app.json同级的文件夹下(TIPS:需要注意不要把自己的app.json覆盖掉了)第三步:更改小程序工程中的app.json,在pages字段中增加@smt-ui-template-content-detail/index/index,(TIPS:我们之后会增加参数,保障开发者NPM安装完模板过后,页面自动拷贝到app.json同级目录下)第四步:查看拷贝到自己工程中的页面执行完上述流程后的文件夹如下:
// 项目目录结构├── app.js├── app.json(注意在pages字段下增加@smt-ui-template-content-detail/index/index)├── project.config.json└── node_modules└── @smt-ui-template└── page-content-detail├── app.json└── @smt-ui-template-content-detail(把这个文件夹拷贝出来)├── pages└── home├── home.swan├── home.css├── home.js└── home.json├── @smt-ui-template-content-detail(这个是从node_modules中拷贝出来的文件夹)└── components└── custom├── custom.swan├── custom.css├── custom.js└── custom.json
2.4 你还需要知道的
当我们用智能小程序开发者工具初始化了一(N)个模板到底发生了什么?首先,智能小程序开发者工具会帮我们执行npm install @smt-ui-template,并把我们选中的模板拷贝出来其次,智能小程序开发者工具,会帮我们把拷贝出来的模板中的app.json与我们自己的app.json合并最后,大功告成,我们拥有了一个创建好的工程,如图2.4.1
图2.4.1

3. 工具类库篇
遥想古老的H5年代,如果前端程序员们发现自己想用一个功能(比如:date-format),可能会习惯性的搜索一下date相关的包,并npm install一下(也有可能是ctrl-c/ctrl-v)。可是到了小程序开发的时代,很多为H5开发的好用NPM包失灵了,探究一下小程序的底层原理,并不难发现为什么 — 失去了DOM/BOM小程序使用双层架构,我们所书写的小程序逻辑js均运行在逻辑层,如图3.1
图3.1

所以无论是我们的js,还是我们以npm的形式引进来的js,都无法再碰到DOM/BOM,很多NPM因此失灵,我就想用个RSA怎么就这么难!!!难难难难难~~
自己开发类库倒也是一个办法,可是我们总会面临急迫的业务/繁重的工作…H5年代的NPM库它们不香么?
正所谓是:遇事不决,量子力学,哦不,遇事不决,一顿猛学。智能小程序团队为广大开发者提供了一些高效的类库,可以帮我们在日常开发工作中尽量多npm install一些复杂但通用的代码包,可以让我们的工作更(zao)加(dian)简(jie)单(shu),我们一起来学习下吧:https://smartprogram.baidu.com/docs/develop/extended/lib/smt-promisify/ 这,就是为智能小程序的开发者们开放的工具类库。
3.1 工具类库里面都有些什么好东西1. @smt-lib/promisify
想用async/await了,但是swan.xxx都是callback形式的?想包装一下swan.xxx变成Promise形式的,但是每次好像在哪儿写过,但是自己又得包装一遍?没关系,使用promisify,想用Promise就用Promise,想用async/await就用async/await
2. @smt-lib/mobx 与 @smt-lib/swanx
在小程序中如何状态管理呢,当然是—用全局变量!(哎呀,谁打我),好吧好吧,不用全局变量了,当然是需要用一些状态管理的库了,如果你仍然对mobx念念不忘,那么我们为你提供了swan与mobx的连接器,你可以使用mobx来管理你的状态,如果你并非mobx党,那么我们也支持swanx这个状态管理库,来管理你的“多页应用” — 智能小程序持续更新中,还有更多好用的工具类库(如:md5/rsa/observer等)等你探索。

3.2 如何使用
第一步:以promisify举例,首先,和前两步一样,npm安装一下需要的工具类库:
npm i @smt-lib/promisify -S
第二步:然后就可以在代码用引入并使用了:
import {    promisifyAll} from '@smt-lib/promisify';// promisify 全部 API// 可以将 swanp 导出以便在任何地方使用export const swanp = promisifyAll(swan);// 调用异步 API 将返回 Promiseswanp.getSystemInfo().then(console.log);swanp.showModal().then(swan.openSetting());
4. 写在最后
以上的组件、模板、工具类库,都是为了帮助大家更好的开发,无论是否使用扩展能力,也都希望大家在做业务的时候,可以考虑一下是不是有复用性更好的方式,减少繁重的开发,当然更欢迎大家向我们提出新的组件(三方的组件或者类库如果通用性较好,我们也会采纳的,直接社区发帖就可以,之后我们会有开放仓库)



您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|Archiver|Baidu Inc.

GMT+8, 2020-11-24 10:18 , Processed in 0.247795 second(s), 16 queries .

Powered by Discuz! X3.2

© 2001-2011 Comsenz Inc.

返回顶部