2-2 原生小程序

因为我们后面所有的语法层、模板层都采用Vue.js来做。其实采用Vue.js只能替换小程序的一些语法和逻辑，我们有一些小程序的内容是无法替换的，比如小程序自带的组件，比如地图啊轮播图啊是可以直接使用的，也是需要学习的。第二个是小程序里面自带的API，比如项目需要扫码，项目里面需要获取用户的经纬度地理位置，这都是需要小程序自带API的。

还有Vue.js的组件。比如需要定义图书的列表，评论的列表等等。这几个组合在一起就可以产出小程序的一个前端的页面。

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

 App这个函数，onLaunch其实是小程序启动的时候要做的事情。app.js是项目的入口，也可以说是项目的统一的配置。

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/movie/movie",
    "pages/search/search",
    "pages/profile/profile"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle": "white"
  },
  "tabBar":{
    "color":"#ccc",
    "list":[{
       "text":"推荐电影",
       "iconPath":"images/LMQ.jpg",
        "selectedIconPath":"images/LMQ1.jpg",
        "pagePath":"pages/index/index"
    }
    ,{
      "text":"搜索",
      "iconPath":"images/LMQ2.jpg",
      "selectedIconPath":"images/LMQ3.jpg",
      "pagePath":"pages/search/search"
    },
    {
         "text":"我的",
         "iconPath":"images/LMQ4.jpg",
         "selectedIconPath":"images/LMQ5.jpg",
         "pagePath":"pages/profile/profile"

    }
    ]
  }
}

它包含了我们整个项目的一些配置，包括我们用了哪几个页面，我们整个窗口的上面的标题的字和颜色都可以尝试给它修改一下。

app.wxss

/**app.wxss**/
/*.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
*/
page{

   font-family: "Microsoft YaHei";/*雅黑字体*/
   background-color: #fff;
   display:flex;
   /*纵向排列*/
   flex-direction:cloumn; 
}
.page-header{
  display: flex;/*弹性盒子模型*/
  /*横向居中对齐*/
  justify-content: center;
  /*下边框*/
  border-bottom: 2rpx solid #ccc;/*下边框1像素*/
  margin-bottom: 10rpx; /*margin-bottom5像素*/
}
.page-header-text{

   padding: 20rpx 40rpx;
   color: #999;
   font-size: 40rpx;
}

app.wxss是腾讯自己造的一个语法，跟CSS基本上是一样的。只不过wxss少了其中几个能力，最重要wxss多了一个rpx。就是我们在做移动端适配的时候直接用这个单位完美的适配所有的机型，整个的宽度是750rpx，我们只需要根据整个宽度的一个比例，我们就可以不用自己再适配了因为rpx自己就可以。这个是腾讯给的一个非常好的一个单位。

project.config.json

{
    "description": "项目配置文件。",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "1.9.98",
    "appid": "touristappid",
    "projectname": "%E8%B1%86%E7%93%A3",
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

project.config.json这个是你项目的配置文件。其实你需要改的地方并不是很多，可能会修改projectname。包括后面小程序端和Server端两个文件夹都在一个这个里面管理的时候，我们还要设置一下小程序端的code在哪儿，服务端的code在哪个目录。

注意小程序开发工具是有腾讯云这个按钮的。所以我们也要在这个小程序工具里面管理我们后端的代码。project.config.json主要就是干这个事情。其他的一些要做的东西基本不用改，setting都不用改，主要就是配置文件的目录。

app.wxss是全局的样式。app.*都是全局所有的配置。logs文件夹里面的配置可以覆盖全局的配置。

pages/index/index.wxml

<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}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

wxml其实就是类似于html的语法，只不过div、p元素等标签都不能直接用，而是要用腾讯指定的这些组件和标签，比如view和text。wxml语法不用深究，因为后面都会用Vue.js语法来做。

wxss其实和CSS没什么区别，重点是多了rpx这个单位。

index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

为了体现出rpx单位的友好，修改一下index.wxss

重新创建一个项目再说了。

iphone6、iphone7、iphone5显示的整个范围的大小是不太一样的。如果我们想把它设置成全局，rpx这个单位非常好。

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 500px;
  height: 500px;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

750rpx，是铺满整个屏幕的。

无论是苹果还是安卓，都是直接适配屏幕的。这个单位一定要注意。

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 750rpx;
  height: 750rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

---

index.js

整个页面的结构，包括app，包括Page都不用深究，其实就是这个页面的启动函数，后面都会用Vue.js来取代。底下它会有一些API的事情。比如说以wx.开头的就是腾讯自带能力的API，这个是Vue.js无法取代的。这个其实就是整个页面执行的JS。具体的JS逻辑大家不用管了，整体的这个页面的结构都是使用Vue.js。比如data，跟Vue.js里面的data是一样的。onLoad就是页面加载的时候跟Vue.js组件里面的onCreate

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

---

logs目录其实比index目录就多了一个logs.json.

{
  "navigationBarTitleText": "查看启动日志"
}

navigationBarTitleText其实就是配置了小程序的标题。

小程序的标题WeChat是在app.json里面配置的。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

navigationBarTitleText是全局的标题。

点击头像跳到log页面

App.js主要是做项目全局的配置。后面也只会在app.json里面做登录状态的存储和读取。全局的状态。别的都是在每个page里面另外做。

app.json其实就几个生命周期：onLaunch、onShow、onHide、onError，这几个周期分别在小程序不同的执行阶段会执行不同的函数。后面都会用Vue.js的生命周期来取代。