百度小程序之智能小程序扩展功能

1. smart-ui组件篇

团队里没有UE/UI?想找一些和百度APP统一的图标库但是找不到?想做一个自定义的下拉刷新,可是各种回弹效果总不满意?

默认图片

这事儿包我们身上了,智能小程序团队推出的smart-ui组件库,是一套开发、设计风格统一的智能小程序扩展组件库,由百度智能小程序团队为小程序量身定制,以增强开发者开发体验。可以直接在你的小程序中引入。

 我们的文档:https://smartprogram.baidu.com/docs/develop/extended/ui_component/info/

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 将返回 Promise
swanp.getSystemInfo().then(console.log);
swanp.showModal().then(swan.openSetting());

 

4. 写在最后

以上的组件、模板、工具类库,都是为了帮助大家更好的开发,无论是否使用扩展能力,也都希望大家在做业务的时候,可以考虑一下是不是有复用性更好的方式,减少繁重的开发,当然更欢迎大家向我们提出新的组件(三方的组件或者类库如果通用性较好,我们也会采纳的,直接社区发帖就可以,之后我们会有开放仓库)

未经允许不得转载:一起SEO学习网 > 百度小程序之智能小程序扩展功能

评论