Home
>
莆田支付宝小程序
>
莆田百度智能小程序开发
莆田百度智能小程序开发

time:2020-04-05 02:21:28

author:石家庄众宣网络科技有限公司

【Font size: big medium smail

本文由石家庄众宣网络科技有限公司提供,重点介绍了百度智能小程序开发相关内容。石家庄众宣网络科技有限公司专业提供支付宝小程序,小程序注册,小程序商店等多项产品服务。公司客户好评率高,行业口碑好,是在本行业中您的不二选择

百度智能小程序开发百度智能小程序_百度小程序页面开发百度智能小程序的启动1、用户点击入口后,百度 App 会加载智能小程序的代码包;2、解压并获取其中的 app.json ;3、根据框架机制,智能小程序框架在加载完成代码包之后,会启动 pages 中的第一项,并渲染为首次看到的页面;4、智能小程序启动后,开始调用 app.js 中预设的生命周期方法。

App({

onLaunch: function () {

// APP LOGIC

}

});在一个百度小程序中,只有一个 App 的实例(开发者可以用这个实例定义多个 Page 共享的变量)。SWAN(视图)这部分是每个智能小程序页面的展现模板,类似于 Web 开发中的 HTML ,SWAN 模板中使用的标签均为 SWAN 组件规定的标签。

{{item.title}}

{{tag.content}}

点击加载更多

基础数据绑定

Hello My {{ name }}

// xxx.js

Page({

data: {

name: 'SWAN'

}

});

循环开发者可以通过在元素上添加s-for指令,来渲染一个列表:语法

{{p.name}}

Page({

data: {

persons: [

{name: 'superman'},

{name: 'spiderman'}

]

}

});

条件开发者可以通过在元素上添加s-if指令,来在视图层进行逻辑判断:

4G

Wifi

Other

Page({

data: {

is4G: true,

isWifi: false

}

});

事件事件处理开发者可以使用bind: + 事件名来进行事件绑定

点击加载更多

Page({

loadMore: function () {

console.log('加载更多被点击');

}

});

目前支持的事件类型有:类型触发条件touchstart手指触摸开始touchmove手指触摸后进行移动touchend手指触摸结束touchcancel手指触摸动作被打断,如来电提醒等tap手指触摸后马上离开动作事件对象当开发者绑定方法到事件,事件触发时,SWAN 会给触发的方法传递事件对象,事件对象因事件不同而不同,目前基础的事件对象结构为:属性类型说明typeString事件类型currentTargetObject事件触发的属性集合dataset开发者可以在组件中自定义数据,并在事件发生时,由 SWAN 所在事件对象中,传递给绑定函数。示例代码:

dataset-test

Page({

viewtap: function (event) {

console.log('value is:', event.currentTarget.dataset.swan);// 输出1

}

});

touches开发者在接收到触摸类事件后,在事件对象上,可以接收到当前停留在屏幕上的触摸点。Touch 对象属性类型描述pageX , pageYNumber距离文档左上角的距离,横向为 X,纵向为 YclientX , clientYNumber距离屏幕视口左上角距离,横向为 X,纵向为 YCSS(样式)CSS 结尾的样式文件,类似于常规 CSS,用以渲染界面时进行样式描述。JS(逻辑)SWAN 百度智能小程序中,JS 文件是控制交互逻辑的动态语言。如,在 SWAN 模板中书写了以下代码:{{ me }}在 JS 中可以对于视图中的行为进行监听,并触发界面的变化。Page({ setName: function() { this.setData({ me: "aaa" }); }})Tips:1、书写 SWAN App 的逻辑层请使用 JavaScript 。2、逻辑层将数据进行更新后,会触发视图更新。3、在 app.js 中使用 App 方法、在页面 JS 中使用 Page 方法,来进行页面的逻辑管理。4、可以在 SWAN 命名空间下,使用各种 API 端能力。5、框架中不可使用 window, document 等 Web 能力。页面路由页面栈框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向当前页面出栈,新页面入栈页面返回页面不断出栈,直到目标返回页,新页面入栈Tab 切换页面全部出栈,只留下新的 Tab 页面getCurrentPages()getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。Tip: 不要尝试修改页面栈,会导致路由以及页面状态错误。路由方式对于路由的触发方式以及页面生命周期函数如下:路由方式触发时机路由前页面路由后页面初始化智能小程序打开的第一个页面onLoad, onShow打开新页面调用 API swan.navigateTo 或使用组件onHideonLoad, onShow页面重定向调用 API swan.redirectTo 或使用组件onUnloadonLoad, onShow页面返回调用 API swan.navigateBack 或使用组件 或用户按左上角返回按钮onUnloadonShowTab 切换调用 API swan.switchTab 或使用组件 或用户切换 Tab各种情况请参考下表重启动调用 API swan.reLaunch 或使用组件onUnloadonLoad, onShowTab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):当前页面路由后页面触发的生命周期(按顺序)AANothing happendABA.onHide(), B.onLoad(), B.onShow()AB(再次打开)A.onHide(), B.onShow()CAC.onUnload(), A.onShow()CBC.onUnload(), B.onLoad(), B.onShow()DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()D(从转发进入)AD.onUnload(), A.onLoad(), A.onShow()D(从转发进入)BD.onUnload(), B.onLoad(), B.onShow()Tips:1、navigateTo, redirectTo 只能打开非 tabBar 页面。2、switchTab 只能打开 tabBar 页面。3、reLaunch 可以打开任意页面。4、页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。5、调用页面路由带的参数可以在目标页面的 onLoad 中获取。PagePage() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。object 参数说明:属性类型描述dataObject页面的初始数据onLoadFunction监听页面加载的生命周期函数onReadyFunction监听页面初次渲染完成的生命周期函数onShowFunction监听页面显示的生命周期函数onHideFunction监听页面隐藏的生命周期函数onUnloadFunction监听页面卸载的生命周期函数onPullDownRefreshFunction监听用户下拉动作onReachBottomFunction页面上拉触底事件的处理函数onShareAppMessageFunction用户点击右上角转发onErrorFunction错误监听函数其他不限开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问示例:

Page({

data: {

name: 'swan'百度智能小程序开发

},

onLoad: function () {

},

onReady: function() {

// Do something when page ready.

},

onShow: function() {

// Do something when page show.

},

onHide: function() {

// Do something when page hide.

},

onUnload: function() {

// Do something when page close.

},

onPullDownRefresh: function() {

// Do something when pull down.

},

onReachBottom: function() {

// Do something when page reach bottom.

},

onShareAppMessage: function () {

// return custom share data when user share.

}

});智能小程序框架,会将同页面的 .swan 文件与 .js 中定义的 Page 对象中的 data ,进行组合渲染。组件智能小程序中提供了丰富多样的组件,开发者可以在 .swan 文件中,使用预设好的组件,拼装完成自己的智能小程序的页面。如:使用 slider 组件即可在页面上展示一个 slider 组件。也可以在 slider 组件上绑定事件,在相应的组件事件发生时,得到回调与组件信息:

Page({

changeSwitchDuration: function () {

console.log('changeSwitchDuration');

}

});

API智能小程序为开发者提供了百度 App 提供的丰富的端能力。使用方式比较简单,直接调用 SWAN 对象上的端能力方法,或者 Page 对象中 this 上挂载的方法。如showToast:swan.showToast({ title: '我是标题'});也有很多挂载在 Page 对象与 SWAN 上的方法,如 createCanvasContext ,在 SWAN 对象与 Page 对象上均有。所以,你可以这样用:百度智能小程序开发

Page({

data: {},

onLoad: function () {

this.createCanvasContext();

}

});

也可以这样用:

Page({

data: {},

onLoad: function () {

swan.createCanvasContext();

}

});

但是推荐使用第一种方法,可以在当前 Page 上精准查找,避免一些问题。具体方法的挂载,在 API 章节 会有详细介绍。

Reprint please indicate:http://exqm.zhongxuan360.top/mbxcx-1026.html