小程序之百度智能小程序（第一章）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

智能小程序文档：https://smartprogram.baidu.com/developer/index.html （点击进入文档 - 开发）

下载开发工具：https://smartprogram.baidu.com/docs/develop/tutorial/index_first/ （根据自己电脑选择下载对应版本：Windows 64版｜ Mac版）

新建 - 下一步 - 填写项目名称（自己取名）、项目目录（存放小程序代码的文件夹，需提前新建好）、AppID（此为项目ID，目前暂不支持个人开发申请，则点击体验：智能小程序）- 完成

打开后可看到小程序中的各类组件使用效果，及代码示例，可供开发参考学习。

以下将分三步学习小程序基础开发：

第一步：基本配置（参考文档：简易教程 - 全局配置）

1、目录结构

2、配置界面、路径

可以通过配置 app.json 文件，设置 SWAN 的界面、路径、多 TAB 等。

app.json文件

 1 {
 2      // 配置页面路径，此为必须配置，否则页面无法编译出来
 3     "pages": [
 4         "pages/index/index",
 5         "pages/detail/detail"
 6     ],
 7      // 配置app头部样式以及文字内容等等
 8     "window": {
 9         "navigationBarTitleText": "Demo"
10     },
11      // 配置app底部tab样式以及文字内容等等
12      "tabBar": {
13         "list": [{
14         "pagePath": "pages/index/index",
15         "text": "首页"
16     }, {
17         "pagePath": "pages/detail/detail",
18         "text": "详情"
19         }]
20   }
21 }

3、了解生命周期，常用的一般是onLoad，页面加载完成的时候触发,相当于vue中的mounted，比如请求数据的方法在vue中mounted里调用，而小程序中则在onLoad中调用

4、事件处理函数

在小程序中事件函数跟vue.js相似，例子点击事件 vue.js：@click="tapAction" 小程序： bind:tap="tapAction"（也可以省略写为 bindtap="tapAction"）

然而带值给方法 vue.js：@click="tapAction (index, item) " 小程序：bind:tap="tapAction" data-index="{{index}}" data-item="{{item}}" (格式为：data-自定义命名="{{所需要带给方法的值}}")

index.swan文件

<view s-for="item, index in list">
    <text bind:tap="tapAction" data-index="{{index}}" data-item="{{item}}">{{item}}</text>
</view>

index.js文件

Page({
    data: {
        list: ['列表1', '列表2', '列表3']
    },
    // 页面加载完成的生命周期方法
    onLoad() {

    },
    // 方法 - 列表点击
    tapAction(e) {
        console.log(e) // 传过来的值会在e.currentTarget.dataset里接收到，打印出来截图看下方”附上图“
　　 }
});

附上图：

第二步：使用组件，开始开发页面结构布局（参考文档：组件）

智能小程序中提供了丰富多样的组件，开发者可以在 .swan 文件中，使用组件开始完成自己的智能小程序页面。

组件示例：

1、view：视图容器（相当于html中的div，用来当作包裹容器，每个view独占一行）

　　text：放文本的元素（相当于html中的span，用来放置文本，在同一行显示）

index.swan文件

// view相当于块级标签div,text 相当于行内标签span
<view class="view">
       <text class="text ">view 相当于块级标签</text>
       <text class="text ">text 相当于行内标签</text>
</view>

2、rich-text：富文本（可用于解析包含html标签的文本）

index.swan文件

<rich-text nodes="{{nodes}}"></rich-text>

index.js文件

Page({
    data: {
        // 绑定的值
        nodes: ‘这是一个span标签<span style="color: red;">高亮</span>’
   }
})

输出结果为：这是一个span标签高亮

3、input输入框

index.swan文件

<input value="{{inputValue}}" placeholder="请输入内容" bind:change="inputChange" ></input>

index.js文件
Page({
　　　　data: {
　　　　     // input框默认值
　　　　     inputValue: '',
　　　　},
      // 当slider组件发生改变时绑定的事件　
　　　　inputChange() {
 　　　　　　console.log('input组件改变了');
 　　　}
});

以上例子为最常用的布局组件，其他根据开发所需自行看开发文档，文档中均会提供使用例子，基本使用方法与如上例子无异。

第三步：使用API，页面结构布局需调用 swan 对象上的端能力方法，一切皆在swan.xxx上实现。（参考文档：API）

API示例：

1.、request：发起网络请求（请求接口数据）

index.swan文件
// 在.swan上使用data里的数据
<view class="view">{{dataList}}</view>

index.js文件

Page({
    data: {
        dataList: ''
    },
    // 页面加载完成的生命周期方法
    onLoad() {
        // 页面加载完成时调用请求数据的方法
        this.getDataAction();
    },
     // 请求数据的方法
    getDataAction() {
        swan.request({
            url: 'https://smartprogram.baidu.com/xxx', // 改为自己的接口地址
            method: 'GET',
            dataType: 'json',
            data: { // 改为自己的接口所需的参数
                    key: 'value' 
            },
            header: {
                    'content-type': 'application/json' // 默认值，不用管
            },
            success: res => { //成功回调
                console.log(res.data);
                // 把请求成功返回的res数据赋值给data里的dataList，供页面上.swan使用，然而说到这么设置的原因，可以打印出this,console.log(this),看如下图，可看到里面会有setData方法，用于修改data里的值，而getData可以想到是获取data里的值，但是一般会使用this.data.dataList来代替，比较常用
                this.setData({
                      dataList: res.data
                })
　　　　　　　　　　// 赋值之后，console.log(this)打印this,看如下图，可以点开看到data里的数据，如上data里的数据,现在的dataList已为赋值后的值
                console.log(this.data.dataList)
            },
            fail: err => { //失败回调
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
});

console.log(this)打印结果

2.、navigateTo：跳转到某个页面（相当于路由）

index.swan文件

// 在.swan上加一个点击跳转页面的方法
<view class="view" bind:tap="clickAction">点击</view>

index.js文件
Page({
    data: {
     
    },
    // 页面加载完成的生命周期方法
    onLoad() {

    },
     // 点击后的方法
    clickAction() {
        swan.navigateTo({

　　　　　　 // 此路径去到detail页面，为app.json的pages里配置的路径，？后直接传递参数
    　　　　url: 'pages/detail/detail?key=value'

 　　　　});
 　　}
 });

3、showToast：显示消息提示框（提示消息）

index.swan文件

// 在.swan上加一个点击显示消息提示框的方法
<view class="view" bind:tap="clickAction">点击</view>

index.js文件

Page({
    data: {
     
    },
    // 页面加载完成的生命周期方法
    onLoad() {

    },
     // 点击后的方法
    clickAction() {
        swan.showToast({

    　　　　title: '我是标题',
           icon: 'loading',// 如果不想有icon图标则设置为'none'
           duration: 1000// 消息提示框显示多长时间，单位毫秒，默认2000

 　　　　});
 　　}
 });