新手开发小程序遇到的问题

最新推荐文章于 2022-05-25 19:37:10 发布

chenphoenix

最新推荐文章于 2022-05-25 19:37:10 发布

阅读量657

点赞数

分类专栏：小程序文章标签：前端

本文链接：https://blog.csdn.net/chenphoenix/article/details/105669241

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、按照小程序官方文档，安装开发工具

1、打开开发工具，建立你的第一个小程序项目，步骤参考小程序开发文档

二、引用vant UI

引用vant UI组件库链接
步骤：
1、通过控制台，进入你创建小程序的项目,npm i @vant/weapp -S --production ,安装文档的步骤引用
2、开发过程中使用vant,本地运行会超级卡，大约加载需要1分钟，但是不要担心，上线后只会上传你所用到的组件，基本不会卡
3、建议用日期用小程序官方自带的，不要用vant的，因为日期组件 formatter 和 filter 不能同时使用，不知道什么时间页面就会错误,日期点不动。
4、vant地址组件在苹果手机中不能滑动，建议不要用，用小程序自带的地址picker
.wxml

<van-popup z-index="9999" show="{{ showTime }}" position="bottom" bind:close="onTimeClose">
<van-datetime-picker
  type="datetime"
  value="{{ currentDate }}"
  min-date="{{ minDate }}"
  max-date="{{ maxDate }}"
  formatter="{{ formatter }}"
  bind:confirm="confirmTime"
  bind:cancel="cancelTime"
/>

.js

data:{
    minHour: 0,
    maxHour: 23,
    minDate: new Date().getTime() + 30 * 60 *1000,
    maxDate: new Date().getTime() + 30 * 24 * 60 * 60 *1000,
    currentDate: new Date().getTime()+ 30 * 60 *1000,
    currentTime:'请选择上门时间',//页面中展示的时间
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`;
      }
      else if (type === 'day') {
        return `${value}日`;
      }
      else if (type === 'hour') {
        return `${value}时`;
      }
      else if (type === 'minute') {
        return `${value}分`;
      }
      return value;
    },
    filter(type, value) {
      if (type === 'minute') {
        return value.filter(value => value % 30 === 0)
      }
      return value;
    },
}

三、全局配置

1、app.js 中配置公共的后台地址

App({
  onLaunch:function(){...},//小程序默认的代码
  globalData: {
    userInfo: null,
    url:'https://xxxxxxx.com/',//和小程序后台配置的域名一样
  }
}),

⚠️：开发中可以不校验域名的合法性，但是需要在开发工具中工具–>项目详情 --> ☑️选中不校验域名。如果此域名没有被部署，则预览的时候是没有数据的，但是真机调试是有数据的
在index.js中引用全局配置的文件

//获取应用实例
const app = getApp();
var url = app.globalData.url;
page({
	data:{
		swiperImg:null,
	},
	onShow:function(){
		  // 轮播图
	    wx.request({
	      url: url+'activity',
	      method:'get',
	      data:{
	      },
	      header: {'content-type':'application/json'},
	      success:function(res){
	        that.setData({
	          swiperImg:res.data.data
	        })
	      }
	    })
	}
})

⚠️：注意
get请求的header头信息是

header: {'content-type':'application/json'},

post请求的头信息必须如下，这样才可以给后台传送数据

header:{
  'content-type':'application/x-www-form-urlencoded'
},

四、登录授权

1、现在小程序上线后不能直接弹出授权框，必须要用户主动点击按钮出发授权，用button按钮

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 立即登录 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

2、必须先调用wx.login 在调用wx.wx.getUserInfo 这样将code和用户信息传给后台，获得后台返回的openid(用户的唯一标志)

  // 获取用户信息
  getUserInfo: function(e) {
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
    var that = this;
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if(res.code){
          let code = res.code;
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              wx.setStorageSync('userInfo', res.userInfo);
              wx.request({
                url: url+'login',
                data:{
                  code:code,
                  encryptedData:res.encryptedData,
                  iv:res.iv,
                },
                header:{'content-type':'application/json'},
                success:function(res){
                  wx.setStorageSync('openid', res.data.data.openid)
                  wx.setStorageSync('userLevel', res.data.data.level)
                  that.setData({
                    userLevel:res.data.data.userLevel,
                  })
                  app.globalData.openid = res.data.data.openid
                  wx.showToast({
                    title: '登录成功',
                    icon: 'success',
                    duration: 2000
                  }) 
                }
              })
            }
          })
        }
      }
    })
  },

3、将opened和用户信息存在Storage，方便以后调用和判断用户是否登录，wx.getStorageSync(‘openid’）为空时，未登录，需要给提示框，重新登录, 在这里插入图片描述

五、按照文档写页面代码

1、在app.js中新建index入口，保存后，页面会自动出现index文件加，里边有js,json,wxml,wxss四个文件

"pages": [
    "pages/index/index",
    "pages/logs/logs"
 ],

⚠️：最后一个逗号，不能加会报错

2、跳转页面时传参数

//跳转到结算页面
wx.navigateTo({
  url: '/pages/settlement/settlement?id='+this.data.content.id +'&goodsInfo='+wx.getStorageSync('goodsIS'),
})

在对应的settlement.js页面中参数都会在options中

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      goodsInfo:options.goodsInfo,
      id:options.id,
    })
    try {
      wx.setStorageSync('goodsInfo',options.goodsInfo);
      wx.setStorageSync('id',options.id);
    } catch (e) { }

  },

3、微信调用打电话api
.js中代码

  data:{
	adviceline:'12345678945',
  },
  // 微信打电话功能
  callPhone(e){
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone, //仅为示例，并非真实的电话号码
      success:res=>{
      },
      fail:res=>{
      }
    })
  },

.wxml中代码

  <view class="other-list-con" data-phone="{{adviceline}}" bindtap="callPhone">联系客服 </view>

4、微信分享

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      return {
        title: "分享描述信息",
        imageUrl:'../../images/logo.jpg',//图片比例是5:4
        path: '/pages/index/index',
        success: function (res) {
        }
      }
    }
    if (res.from === 'menu') {
      return {
        title: "分享描述信息",
        path: '/pages/index/index',
        imageUrl:'../../images/logo.jpg',//图片比例是5:4
        success: function (res) {
        }
      }
    }
  },

5、微信支付

wx.request({
      url: url+'order/pay',
      method:'get',
      data:{
        openid:wx.getStorageSync('openid'),
        sn:that.data.sn,//订单号
        real_price:that.data.priceUp,//价格
        pay_type:'1',//支付类型，线上1，线下2
      },
      header:{'content-type':'application/json'},
      success: function (res) {
        var res = res.data.data
        var timeStamp = res.timeStamp
        var nonceStr = res.nonce_str
        var packAge = res.prepay_id
        var paySign = res.signs
        //微信支付
        wx.requestPayment({
          'timeStamp': timeStamp,
          'nonceStr': nonceStr,
          'package': 'prepay_id=' + packAge,
          'signType': 'MD5',
          'paySign':  paySign,
          'success':function(res){
            console.log('支付成功');
          },
          'fail':function(res){},
          'complete':function(res){},
        })
      }
    })

6、后台返回的html的处理

detail为后台返回的带标签的字符串，但是这样的缺点是不能自定义后台返回的数据的样式

<rich-text class="order-des" nodes="{{detail}}"></rich-text>

7、用户授权订阅号通知消息

wx.request({
  url: url+'message',
  method:'get',
  header:{'content-type':'application/json'},
  success:function(res){
    // 用户授权订阅号通知消息
    wx.requestSubscribeMessage({
      tmplIds: res.data.data,//获得订阅号的模版ID，最多只能是3条
      // tmplIds:['FASGGDFAGJFADJFJAJJFASDFSGGDSGFDS'],
      success (res) { 
            //如论是允许还是取消，都是成功，只是返回的状态accept ，reject 不一样
      }
    })
  },
})

8、返回的操作情况
a、修改返回后的页面的data中active值

 /**
  * 生命周期函数--监听页面卸载
  */
  //修改返回后的页面的data中active值
 onUnload: function () {
   var that = this 
   var pages = getCurrentPages();
   var currPage = pages[pages.length - 1];   //当前页面
   var prevPage = pages[pages.length - 2];  //上一个页面
   prevPage.setData({
     actice: that.data.actice
   });
 },

b、用户点击返回时自定义返回的链接

 /**
   * 生命周期函数--监听页面卸载
   */
   //用户点击返回时自定义返回的链接
  onUnload: function () {
    wx.reLaunch({
      url: '/pages/my/my'
    })
  },

9、页面自定义滚动的位置，滚动到类名为check-box 的地方，其它的参数看文档

 wx.pageScrollTo({
   // scrollTop: 0,
   selector:'.check-box',
   duration: 300
 })

10、配置底部tabbar的时候一定要颜色，不加颜色的话，苹果手机将不显示文字

“tabBar”：{
	color：“#333333”，
	selectedColor：“#5bbb49”,
	list:[{
	...
	}]
}

六、新手写小程序遇到的问题总结，希望各位给我提意见及优化方案，感谢🙏

chenphoenix

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录