• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序之百度智能小程序(第一章)

原作者: [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

     });
   }
 });

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

看完之后应该能够实现一个简单的布局效果。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序模板引入两种方式发布时间:2022-07-18
下一篇:
微信小程序base64图片在canvas上画图发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap