小程序开发心得

小程序开发需要的准备工作？

1、首先在微信公众平台注册小程序账号，就可以初步开发了

2、开发过程中需要配置一些服务器域名、业务域名

3、如果需要跟app绑定，需注册一个微信开放平台（会关联一个统一的UnionID），将app与小程序绑定在同一开放平台下（做app分享小程序时必须绑定）

小程序开发中的接口调用：

1、当用户主动触发登录操作（或新用户需要授权）时，
    可以使用 wx.checkSession 检查登录态是否过期，过期后调用登录接口wx.login，获取到临时登录凭证code（有效期五分钟），开发者需要在开发者服务器后台调用 auth.code2Session，使用 code 换取 openid、unionid、session_key 等信息

wx.checkSession({
  success () {
    //session_key 未过期，并且在本生命周期一直有效
  },
  fail () {
    // session_key 已经失效，需要重新执行登录流程
    //重新登录
    wx.login({
      success (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://example.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }
})

2、当某个操作需要用户授权获取基本信息时，
    可以使用 wx.getSetting 来查询用户是否授权过，授权后调用wx.getUserInfo()获取用户信息

<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>


Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})

小程序开发中遇到的问题？

1、生成小程序码功能
服务端调生成小程序码接口只能生成线上小程序的码，因此在测试环境测试不了小程序码功能，
另外如果需要生成小程序码的页面地址是新开发的页面，也需要上线后才能生成对应页面的小程序码，否则服务端会生成失败

2、安卓、ios利用友盟分享小程序时，ios可以在测试环境分享出体验版小程序，而安卓分享出的依然是线上小程序（待后续安卓开发找到解决方法后再更新此问题，目前没有解决 ）

小程序中获取元素高度 动态设置元素高度的方法：

const query = uni.createSelectorQuery().select('.box');
获取当前页面下第一个相匹配的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
query.boundingClientRect(data => {
        console.log(data)
}).exec(); 

 const query = uni.createSelectorQuery().selectAll('.tr');
获取到当前页面下所有相匹配的节点
query.boundingClientRect(data => {
        console.log(data)
}).exec(); 

小程序手写表格高度自适应：

<view class="table">
	<view class="tr">
		<view class="td">1213</view>
		<view class="td">1213</view>
		<view class="td">1213</view>
	</view>
</view>
<style>
.table {
	border-top: 1upx dashed #C0C0C0;
	border-left: 1upx dashed #C0C0C0;
}
.tr {
	display: flex;
	width: 100%;
}
.td {
	width:35%;
	padding: 5upx;
	box-sizing: border-box;
	text-align: center;
	border-bottom: 1upx dashed #C0C0C0;
	border-right: 1upx dashed #C0C0C0;
}
.td:first-child{
	width:30%;
	font-weight: bold;
}
</style>