读一文,快速入手小程序开发

314 阅读2分钟

基础配置

域名配置

服务器域名

后台接口域名需要配置

业务域名

内嵌h5时需要配置h5的域名,此时需要下载key文件,放在对应的前端项目public 和后台项目的根目录下边,方可添加上

配置关联公众号

如果小程序内嵌公众号文章页,需要此小程序与对应的公众号进行关联

开发注意事项

小程序调取分享

需要用button组件,增加open-type="share",即可进行分享

/wxml:
<button class="group__btn" open-type="share" bindtap="handleClickMsg"></button>


/js: 
onShareAppMessage(e) {
    return {
      title: "", //分享卡标题
      path: "",//分享卡点击进入页面路由
      imageUrl:""//分享卡图片
    }
  },

图片属性设置

当加载长图时需要对image 属性进行设置 mode="widthFix" 宽固定 长自适应

<image class="detail__image"  mode="widthFix"  src="https://">
    </image>

手机安全区

苹果手机下边在toolbar 需要设置安全高度防止遮挡,在对应的元素下边设置如下

env(safe-area-inset-bottom)

自定义导航栏

/json
"navigationStyle": "custom",

/js
this.setData({
    navH: App.globalData.navHeight
})
/aap.js
App({
  globalData: {
    navHeight: 0
  },
  onLaunch(options) {
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      },
      fail(err) {
        console.log(err);
      }
    })
 }
})

/wxml
<view class="box" style='height:{{navH}}px'>
    <view class="nav-title">
      我的礼品
      <image class="goHome" bindtap="skipHome"
        src="https://qnunion.feierlaiedu.com/kcschool/20211108111043_E29EA4E5B7A6E4BEA7E58CBAE59F.png"></image>
    </view>

</view>
/less
.box {
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-size: 36rpx;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  .goHome {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width:240rpx;
    height: 80rpx;

  }
}

API调用

获取微信地址

wx.chooseAddress({
  success (res) {
    console.log(res)
    console.log(res.userName)
    console.log(res.postalCode)
    console.log(res.provinceName)
    console.log(res.cityName)
    console.log(res.countyName)
    console.log(res.detailInfo)
    console.log(res.nationalCode)
    console.log(res.telNumber)
  }
})

调取微信授权

wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
    success: (res) => {
      
    },
    fail: () => {
      
    }
})

调取小程序消息

 wx.requestSubscribeMessage({
    tmplIds:[env.temp],
    success:(res)=>{
        
    }
})

调取小程序拼团进度

需要后台返回activityIds,时效24小时

wx.updateShareMenu({
    withShareTicket:true,
    isUpdatableMessage:true,
    activityId:activityIds,
    templateInfo: {
        parameterList: [{
          name: 'member_count',
          value: '1'
    }, {
          name: 'room_limit',
          value: '5'
        }]
     }
})