记第一次写微信小程序

这段时间在写一个公司的微信小程序，一个商城类项目，项目还没有结束，在这里先做一下总结，方便以后浏览查看。

·关于登录

项目最主要的是：两类用户，1-普通用户，不需要注册，只需要获取用户的openId作为用户的登录标志就行；2-供应商用户，需要手机号注册，等待后台审核通过，同时也需要获取用户的openId。

先说一说登录的处理：用户一进入小程序先进入登录页面（登录页面两个按钮，分别是买家登录和供应商登录）,会先判断用户是否授权个人信息，

wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              //将userInfo存入全局变量中
              app.globalData.userInfo = res.userInfo;
              that.login();
            }
          })
        }
      }
    })

如果已经授权，就获取用户个人信息保存在全局变量userInfo中，再调用login函数判断用户的登录转态，主要是判断本地存储中是否存在sessionId（后台存储用户id，类别等信息的session），如果有就说明已经登录了，没有就重新获取然后再保存，之后就直接跳去首页

如果没有授权，页面就不会跳转，停留在登录页，等待用户进行下一步操作：1.普通用户，点击买家登录，弹出是否授权，之后调用login函数判断是否登录，然后再跳转去首页；2.供应商用户，点击供应商登录，同样会弹出用户授权，然后跳去供应商登录页面，输入手机号密码进行登录跳去首页，同样需要保存后台返回的sessionId到本地存储。

//用户登录获取sessionId
  login:function(){
    wx.checkSession({
      success: function () {
        console.log('登录未失效')
        //session_key 未过期，并且在本生命周期一直有效
        //如果sessionId已经存在，就说明已经登录，直接跳转去首页
        if (wx.getStorageSync('sessionId')) {
          wx.switchTab({
            url: '/pages/index/index',
          })
          return;
        };
        var that = this;
        //如果sessionId不存在，说明没有登录，就让用户登录获取sessionId，然后再去首页
        wx.login({
          success: function (res) {
            if (res.code) {
              wx.request({
                url: 'http://',
                data: { code: res.code },
                method: 'GET',
                sucess: function (res) {
                  if (res.statusCode == 200) {
                    wx.setStorageSync('sessionId', res.data.SessionId);
                    wx.switchTab({
                      url: '/pages/index/index',
                    })
                  }
                }
              })
            }
          },
          fail: function () {
            console.log('登录时网络出错');
          },
          complete: function () { }
        })
      },
      fail: function () {
        // session_key 已经失效，需要重新执行登录流程
        //重新登录，获取sessionId存入本地
        console.log('登录已经失效')
        wx.login({
          success: function (res) {
            if (res.code) {
              wx.request({
                url: 'http://',
                data: { code: res.code },
                method: 'GET',
                sucess: function (res) {
                  if (res.statusCode == 200) {
                    wx.setStorageSync('sessionId', res.data.SessionId);
                    wx.switchTab({
                      url: '/pages/index/index',
                    })
                  }
                }
              })
            }
          },
          fail: function () {
            console.log('登录时网络出错');
          },
          complete: function () { }
        })
      }
    })
    
  },

·关于组件

父组件调用子组件<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode>

父组件传值给子组件

properties: {
    phone: {            // 属性名（父组件传的值）
      type: Number,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: ''     // 属性初始值（可选），如果未指定则会根据类型选择一个
    }
  }

子组件传值给父组件<input type='number' bindinput="bindCode"></input>

//将输入的验证码传给父组件
    bindCode: function (e) {
      var myEventDetail = {
        val: e.detail.value
      } // detail对象，提供给事件监听函数
      this.triggerEvent('myevent', myEventDetail)
    }

父组件获取子组件传过来的值

//bind:myevent是子组件中定义的函数 来获取内部的值
  onGetCode: function (e) {
    this.setData({
      code: e.detail.val
    })
  }

父组件要使用子组件是，必须要去json文件中声名

{
  "usingComponents": {
    "getCode": "../../components/getCode/getCode"
  }
}

·关于wxParse的使用

因为小程序中不支持将模板字符串直接生成html<a url='https://github.com/icindy/wxParse'>wxParse-微信小程序富文本解析组件</a>

在要引用的page

/*wxss*/
/*引入wxParse.wxss文件*/
@import '../../../wxParse/wxParse.wxss';

<!--html  -->
<view class='content'>
		<import src="../../../wxParse/wxParse.wxml"/>
		<view class="wxParse">
	        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
        </view>
	</view>

//js 
/*
      *新闻详情的格式图片<img src='' />
      *文字 <view>文字</view>
      *外面不需要包裹其他标签
      * */
      article: "<img src='' /><view >test文字</view>"
onLoad: function (options) {
    WxParse.wxParse('article', 'html', this.data.article, this, 0);
  }

未完待续。。。。