runlan.zhu

沐阳

10
文章
7
分类
11
标签

小程序开发总结文档

小程序
  |  
 阅读次数

1.配置

  • 1.1小程序配置
  • 1.2 app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
"navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"

  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
  • tabBar：设置底部 tab 的表现2-5个
  • navigationBarTextStyle 导航栏标题颜色，仅支持 black/white

3.页面路由

  • 3.1 navigateTo, redirectTo 只能打开非 tabBar 页面。
  • 3.2 switchTab 只能打开 tabBar 页面。
  • 3.3 reLaunch 可以打开任意页面。
  • 3.4 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  • 3.5 调用页面路由带的参数可以在目标页面的onLoad中获取。

    4.开发和测试

  • 4.1 可以使用体验版进行研发和测试，及时更新代码和体验最新版本，后台要有一定权限才能体验

    5.生命周期函数

  • 5.1 onLoad Function 生命周期函数–监听页面加载
  • onReady Function 生命周期函数–监听页面初次渲染完成
  • onShow Function 生命周期函数–监听页面显示
  • onHide Function 生命周期函数–监听页面隐藏
  • onUnload Function 生命周期函数–监听页面卸载
  • onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
  • onPageNotFound Function 页面相关事件未找到页面
  • 拓展1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    onUnload:function(e){
            let pages = getCurrentPages();
            let currPage = pages[pages.length - 1];   //当前页面
            let prevPage = pages[pages.length - 2];  //上一个页面
            
            //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
            prevPage.setData({
              returnsetdata: 'verifyreturn'
            })
          }

6. image媒体组件

  • 6.1 mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
  • 6.2 缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
  • 6.3 缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  • 6.4 缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
  • 6.5 缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
  • 6.6 裁剪 top 不缩放图片，只显示图片的顶部区域
  • 6.7 裁剪 bottom 不缩放图片，只显示图片的底部区域
  • 6.8 裁剪 center 不缩放图片，只显示图片的中间区域…

7. 地图map

  • 7.1 longitude Number 中心经度
  • latitude Number 中心纬度
  • scale Number 16 缩放级别，取值范围为5-18
  • markers Array 标记点
  • covers Array 即将移除，请使用 markers
  • polyline Array 路线
  • circles Array 圆
  • controls Array 控件
  • include-points Array 缩放视野以包含所有给定的坐标点
  • show-location Boolean 显示带有方向的当前定位点
  • bindmarkertap EventHandle 点击标记点时触发，会返回marker的id
  • bindcallouttap EventHandle 点击标记点对应的气泡时触发，会返回marker的id 1.2.0
  • bindcontroltap EventHandle 点击控件时触发，会返回control的id
  • bindregionchange EventHandle 视野发生变化时触发
  • bindtap EventHandle 点击地图时触发
  • 导航拓展
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    gotolocation: function (e) {
       let lat=e.currentTarget.dataset.lat;
       let lng=e.currentTarget.dataset.lng;
       let name=e.currentTarget.dataset.name;
       let address=e.currentTarget.dataset.address;
        wx.openLocation({  
          latitude: parseFloat(lat),  
          longitude: parseFloat(lng),  
          scale: 18,  
          name: name,  
          address:address 
        })  
        },

8.分享

1
<button class='share-btn' open-type='share'></button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onShareAppMessage: function (ops) {
     let houseid=this.data.houseid;
     if (ops.from === 'button') {
       // 来自页面内转发按钮
       console.log(ops.target)
     }
     return {
       title: '烦租客',
       path: 'pages/index/housedesc/housedesc?id='+houseid,
       success: function (res) {
         // 转发成功
         console.log("转发成功:" + JSON.stringify(res));
       },
       fail: function (res) {
         // 转发失败
         console.log("转发失败:" + JSON.stringify(res));
       }
     }
  
   }

8.获取用户信息

  • 8.1得到开放平台交钱
  • 获取用户信息接口优化调整 官方
  • 微信团队 05月10日
  • 8.2获取用户头像昵称，第一次需要使用 button 组件授权，如果已经用组件授权了，wx.getUserInfo 可直接返回用户数据，无需重复授权弹窗。
  • 8.3. 如果没有用 button 组件授权，wx.getUserInfo 调用接口返回失败，提醒开发者需要先使用 button 组件授权。
    1. 用户可在设置中，取消授权。取消授权后需重新用 button 组件拉起授权。

  • 此次调整仅会影响开发者工具、体验版和开发版，正式版本小程序暂不受影响

  • 8.4 link：

    9. 注意安卓和ios兼容

  • 9.1 Line-height不兼容处理方法 font-family: miui
  • 9.2 时间格式安卓和ios兼容加上.replace(/-/g, “/“);
  • 9.3 然后time=(new Date(timestamp)).getTime();
  • 9.4 苹果机和魅族的有的对position：absolute兼容不是很好
  • 9.5 position fixed 也是 placeholder也会乱

10.地址定位