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

百度小程序开发知识速查

[复制链接]

595

主题

597

帖子

3065

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3065
发表于 2021-9-7 12:34:22 | 显示全部楼层 |阅读模式
百度小程序开发知识整理自百度智能小程序官方开发文档,本帖将百度小程序开发关键要点整理,以便百度小程序开发时快速查询。

百度小程序开发工具:
1、电脑版开发工具
2、网页版(Web IDE 工程版)开发工具

百度小程序开发前的基础知识
1、百度小程序目录结构 传送
2、小程序全局配置文件app.json、app.js 传送
  1)app.json快速配置
    (1)pages设置页面路径
    (2)window设置页面展现
    (3)tabBar底部 tab 栏的表现
    (4)routes路由设置
  1. {
  2.     "pages": [
  3.         "component/component",
  4.         "api/api"
  5.     ],
  6.     "window": {
  7.         "navigationBarTitleText": "Demo",  //导航栏标题文字内容
  8.         "navigationBarBackgroundColor": "#000000",  //导航栏背景颜色
  9.         "navigationBarTextStyle": "white",  //导航栏标题颜色,有效值black/white
  10.         "navigationStyle": "default",  //导航栏样式,有效值默认default,custom自定义导航栏样式
  11.         "backgroundColor": "#ffffff",  //背景颜色
  12.         "backgroundTextStyle": "dark",  //下拉背景字体、loading图样式,有效值dark/light
  13.         "enablePullDownRefresh": "true",  //是否开启下拉刷新
  14.         "onReachBottomDistance":"50"  //页面上拉到底事件触发时距页面底部距离(单位px)
  15.     },
  16.     "tabBar": {
  17.         "list": [
  18.             {
  19.                 "pagePath": "component/component",
  20.                 "text": "首页",
  21.                 "iconPath": "/images/API_normal.png",
  22.                 "selectedIconPath": "/images/API_selected.png"
  23.             },
  24.             {
  25.                 "pagePath": "api/api",
  26.                 "text": "详情",
  27.                 "iconPath": "/images/component_normal.png",
  28.                 "selectedIconPath": "/images/component_selected.png"
  29.             }
  30.         ],
  31.         "backgroundColor" : "#ffffff",  //tab背景色
  32.         "borderStyle": "white",  //tab边框色,有效值white/black
  33.         "color": "#000",  //tab上文字颜色
  34.         "selectedColor": "#6495ED"  //tab上文字选中颜色
  35.     },
  36. "routes": [
  37.         {
  38.             // 投放入口,scheme中的path
  39.             "path": "home",
  40.             // 真实的物理存储路径
  41.             "page": "pages/home/home"
  42.         },
  43.         {
  44.             "path": "list",
  45.             "page": "pages/list/list"
  46.         },
  47.         {
  48.             "path": "foo/bar",
  49.             "page": "pages/list/list"
  50.         }
  51.     ]
  52. }
复制代码
自定义导航的使用:代码示例 2:自定义导航 传送
自定义tabbar的使用:自定义 tabbar 传送
路由及自定义路由使用:更多详见自定义路由 传送
  2)app.js使用速查
  1. // xxx.js,其他页面JS获取小程序唯一的APP实例
  2. const appInstance = getApp();  //获取APP实例
  3. console.log(appInstance.globalData);  //输出APP实例数据

  4. //更多app.js(APP实例)函数和数据
  5. App({
  6.     onLaunch: function () {
  7.         console.log('SWAN launch');
  8.     },
  9.     onShow: function () {
  10.         console.log('SWAN展现');
  11.     },
  12.     onHide: function () {
  13.         console.log('SWAN当前处于后台');
  14.     },
  15.     onError: function () {
  16.         console.log('SWAN发生错误');
  17.     },
  18.     globalData: 'SWAN'
  19. });
复制代码
3、百度小程序页面:(1).css文件;(2).js文件;(3).json文件;(4).swan文件;(5)页面栈;(6)路由方式;(7)自定义路由;(8)Page;(9)组件;(10)API
(3).json文件
  1. // 小程序JS交互示例
  2. // SWAN
  3. <view>{{ me }}</view>  //模板中变量输出{{ me }}
  4. <button bind:tap="setName">点击变值</button>  //bind绑定事件类型tap,函数名setName
  5. // JS
  6. Page({
  7.     setName: function() {  //函数名setName
  8.         this.setData({ me: "aaa" });  //设置变量和值
  9.     }
  10. })
复制代码
(4).swan文件
  1)基础数据绑定
  1. <!-- xxx.swan -->
  2. <view>
  3.     Hello My {{ name }}
  4. </view>
  5. // xxx.js
  6. Page({
  7.     data: {
  8.         name: 'SWAN'
  9.     }
  10. });
复制代码
2)循环
  1. <!-- xxx.swan -->
  2. <view>
  3.     <view s-for="p in persons">
  4.         {{p.name}}
  5.     </view>
  6. </view>
  7. // xxx.js
  8. Page({
  9.     data: {
  10.     persons: [
  11.         {name: 'superman'},
  12.         {name: 'spiderman'}
  13.     ]
  14.     }
  15. });
复制代码
3)条件
  1. <!--xxx.swan-->
  2. <view s-if="is4G">4G</view>
  3. <view s-elif="isWifi">Wifi</view>
  4. <view s-else>Other</view>
  5. // JS
  6. Page({
  7.     data: {
  8.         is4G: true,
  9.         isWifi: false
  10.     }
  11. });
复制代码
4)事件:
    (1)事件处理
  1. //  bind: + 事件名  进行事件绑定,SWAN
  2. <view class="view-more" bind:tap="loadMore">
  3.     点击加载更多
  4. </view>
  5. //  JS
  6. Page({
  7.     loadMore: function () {
  8.         console.log('加载更多被点击');
  9.     }
  10. });
复制代码
支持的事件类型:
touchstart:手指触摸开始
touchmove:手指触摸后进行移动
touchend:手指触摸结束
touchcancel:手指触摸动作被打断,如来电提醒等
tap:手指触摸后马上离开动作

    (2)事件对象:查看“事件对象”的解释和使用方法
    (3)dataset:组件(标签)属性中自定义数组,并传递给绑定函数
  1. // SWAN
  2. <view data-swan="1" bind:tap="viewtap">dataset-test</view>
  3. //  JS
  4. Page({
  5.     viewtap: function (event) {
  6.         // 输出1
  7.         console.log('value is:', event.currentTarget.dataset.swan);
  8.     }
  9. });
复制代码
属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中,且引号可加可不加
  1. //  SWAN
  2. <view data-swan={{test}} bind:tap="viewtap">dataset-test</view>  //双引号可加可不加
  3. // <view data-swan="{{Test}}" bind:tap="viewtap">dataset-test</view>  //变量大小写敏感
  4. //  JS
  5. Page({
  6.     data: {
  7.         test: 1
  8.     },
  9.     viewtap: function (event) {
  10.         // 输出1
  11.         console.log('value is:', event.currentTarget.dataset.swan);
  12.     }
  13. });
复制代码
   (4)touches:停留在屏幕上的触点位置,使用详见“touche对象

(6)路由方式
  1. // 目标页面
  2. Page({
  3.     // 在 onLoad 中获取
  4.     onLoad: function (options) {
  5.         console.log(options);
  6.     },
  7.     // 在 onShow 中获取
  8.     onShow: function() {
  9.         // 获取当前小程序的页面栈
  10.         let pages = getCurrentPages();
  11.         // 数组中索引最大的页面--当前页面
  12.         let currentPage = pages[pages.length - 1];
  13.         // 打印出当前页面中的 options
  14.         console.log(currentPage.options);
  15.     }
  16. });
复制代码
(7)自定义路由
自定义路由的作用:定义路径与页面的映射关系,解决页面失效问题,自定义路由的使用方法:
  1. //  app.json 中增加路由规则字段routes的配置
  2. routes: [
  3.     {
  4.         "path": "foo",  //定义规则
  5.         "page": "pages/bar/baz"  //映射页面路径
  6.     }
  7. ]
复制代码
与路由有关的各类接口使用方法:分path和page两种path:路由路径,即访问一个小程序时 scheme 中的页面路径
page:页面源码文件路径,即某个小程序页面源码(包括页面的 js、swan、json、css)基于项目根目录的文件路径

基于以下路由介绍path、page各类API的使用:
  1. // app.json
  2. {
  3.     "routes": [
  4.         {
  5.             "path": "home",
  6.             "page": "pages/home/index"
  7.         },
  8.         {
  9.             "path": "list",
  10.             "page": "subpack/shop/list"
  11.         }
  12.     ]
  13. }
复制代码
1、含义为路由路径(path)的能力接口
(1)导航 API;(2)导航组件;(3)页面分享路径指定(openShare APIonShareAppMessage API);(4)打开小程序的 scheme;(5)跳转其他小程序页面 API navigateToSmartProgram
  1. // JS (1)导航 API
  2. // 跳转首页
  3. navigateTo({url: '/home'});
  4. // 切换到 tab 页 list
  5. switchTab({url: '/list'});

  6. // SWAN (2)导航组件
  7. // 跳转首页
  8. <navigator open-type="navigate" url="/home">首页</navigator>
  9. // 切换到 tab 页 list
  10. <navigator open-type="switchTab" url="/list">列表</navigator>

  11. // JS (3)页面分享路径指定
  12. // openShare API 中的 path 参数对应自定义路由规则的 path 字段。
  13. swan.openShare({
  14.     title: '智能小程序示例',
  15.     content: '世界很复杂,百度更懂你',
  16.     path: '/home',
  17.     imageUrl: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/logo_new.png',
  18.     success: res => {
  19.         swan.showToast({
  20.             title: '分享成功'
  21.         })
  22.     }
  23. })
  24. // onShareAppMessage API 中的 path 参数对应自定义路由规则的 path 字段。
  25. onShareAppMessage(){
  26.     return {
  27.         title: '智能小程序示例',
  28.         content: '世界很复杂,百度更懂你',
  29.         path: '/home'
  30.     };
  31. }

  32. // (4)打开小程序的 scheme
  33. // scheme
  34. baiduboxapp://swan/4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c/home
  35. // JS
  36. // 引用调起 sdk 打开
  37. window.swanInvoke({
  38.     appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
  39.     path: 'home',
  40.     query: {
  41.         id: 1,
  42.         type: 'a'
  43.     }
  44. });

  45. // JS (5)跳转其他小程序页面 API navigateToSmartProgram
  46. swan.navigateToSmartProgram({
  47.     appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
  48.     path: 'home',
  49.     success: res => {
  50.         console.log('navigateToSmartProgram success', res);
  51.     })
  52. });
复制代码
2、含义为页面源码文件路径的能力接口
使用自定义路由后,有些能力接口仍然表示为页面源码文件路径,其中包括:(1)app.json 中的 pages 字段;(2)app.json 中的 subPackages 字段;(3)app.json 中的 tabBar 字段

4、自定义组件
(1)创建自定义组件 传送
(2)组件模板和样式 传送
(3)Component 构造器 传送




End
回复

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|蓄财网 ( 豫ICP备2021002293号 )

GMT+8, 2021-9-26 12:13 , Processed in 0.095021 second(s), 28 queries .

蓄财网 ©版权所有

© 2021 蓄财网(www.aixc.cn)

快速回复 返回顶部 返回列表