微信小程序总结

微信小程序中用到的技术点总结

1、对于页面及头部的设置位于app.js

"window": {
    "backgroundTextStyle": "light",//背景文本风格
    "navigationBarBackgroundColor": "#5AC6D3",//头部背景色
    "navigationBarTitleText": "饿了吗",//头部标题
    "navigationBarTextStyle": "black",//文本颜色
    "enablePullDownRefresh": true,//下拉刷新
    "backgroundColor": "#5ac6d3"//窗体背景颜色,即窗体下拉刷新或上拉加载时露出的背景
  },

2、页面底部导航的设置

"tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "white",
    "backgroundColor": "#fff",//
    "list": [
      {
        "pagePath": "pages/home/home",//页面地址
        "iconPath": "images/nav/home-off.png",//图标地址
        "selectedIconPath": "images/nav/home-on.png",//选中图标的地址
        "text": "首页"
      },
      {
        "pagePath": "pages/login/login",//页面地址
        "iconPath": "images/nav/my-off.png",//图标地址
        "selectedIconPath": "images/nav/my-on.png",//选中图标的地址
        "text": "我的"
      }
    ]
  },

3、小程序使用组件
在本页面的index.json文件

"usingComponents": {
    "loading": "/components/load/load"
  }

在index.wxml文件

<view class='{{islogo==1?"hidden":""}}'>
  <loading></loading>
</view>

4、使用小程序自带的页面加载弹窗

wx.showToast({
  title: '成功',
  icon: 'loading',
  duration: 2000
})
注意
wx.showLoading 和 wx.showToast 同时只能显示一个
wx.showLoading 应与 wx.hideLoading 配对使用
小程序地址
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

5、小程序的Storage

wx.setStorage({
        key: 'name',
        data: {}
      });

获取时

let getdate = wx.getStorageSync("name");

6、微信数据请求

wx.request({
  url: 'test.php', //请求地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

7、设置本页面的头部标题

wx.setNavigationBarTitle({
      title: '酒店'//页面标题为路由参数
    })

8、获取微信的登陆授权并且存进Storage

wx.login({
      success: function(res) {
        if (res.code) {
          wx.getUserInfo({
            withCredentials: true,
            success: function(res_user) {
              that.setData({
                encryptedData: res_user.encryptedData,
                iv: res_user.iv,
                nickName: res_user.userInfo.nickName,
                avatarUrl: res_user.userInfo.avatarUrl,
              })
              wx.setStorage({
                key: 'userinfo',
                data: {
                  encryptedData: res_user.encryptedData,
                  iv: res_user.iv,
                  nickName: res_user.userInfo.nickName,
                  avatarUrl: res_user.userInfo.avatarUrl,
                }
              });
              wx.request({
                //后台接口地址
                url: app.globalData.url + '/user',
                data: {
                  code: res.code,
                  encryptedData: res_user.encryptedData,
                  iv: res_user.iv
                },
                method: 'GET',
                header: {
                  'content-type': 'application/json'
                },
                success: function(res) {
                  console.log(res.data)
                  wx.setStorage({
                    key: 'openId',
                    data: {
                      "openid": res.data.user_info.openId
                    }
                  });
                  if (res.data.success) {
                    wx.setStorage({
                      key: 'USER_ID',
                      data: {
                        user_id: res.data.user_id,
                        parent: res.data.parent
                      }
                    });
                    that.setData({
                      isuser: true,
                      openid: res.data.user_info.openId
                    })
                    that.freashUser();
                  } else {
                    that.setData({
                      openid: res.data.user_info.openId
                    })
				//更具需求跳转页面
                    wx.navigateTo({
                      url: '/pages/phone/phone?openid=' + that.data.openid + "&name=" + res.data.user_info.nickName + "&unionId=" + res.data.user_info.unionId,
                    })
                  }
                }
              })

            },
            fail: function() {

            }
          })
        }
      }
    })

9、点击分享给朋友

 <button class="shareBtn"  open-type="share">微信好友</button>//设置为optn-type确保是通过按钮点击分享
/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    return {
      title: `${this.data.hotelname}-￥${this.data.minPrice}起`,//分享的头部数据
      path: `pages/hoteldetail/hoteldetail`,//分享地址
      imageUrl: this.data.res_image,//分享标题下面的图片，不设置则为自动截图
      success: function(res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        if (shareTickets.length == 0) {
          return false;
        }
        //可以获取群组信息
        wx.getShareInfo({
          shareTicket: shareTickets[0],
          success: function(res) {
            console.log(res)
          }
        })
      }
    }
  },