2018-09-17

2018-09-17  本文已影响0人  zhangyu_2943

小程序

1 创建项目

2 代码编写

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

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

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

3 项目目录

|- components  组件目录
|- assets  静态资源目录
  |- images
  ... ...
|- pages  小程序页面
  |- index  
    |- index.js
    |- index.json
    |- index.wxml
    |- index.wxss
  |- login
    |- login.js
    |- login.json
    |- login.wxml
    |- login.wxss
   ......
|- utils 公共方法目录
  |- util.js
  ......
|- app.js 小程序主入口
|- app.json 全局配置文件
|- app.wxss 全局样式文件

4 生命周期

4.1 App

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

4.2 Page

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})
生命周期函数
页面相关事件处理函数
Page({
  onShareAppMessage: function () {
    return {
      title: '自定义分享标题',
      path: '/page/user?id=123'
    }
  }
})

5 路由跳转

wx.navigateTo({
  url: 'test?id=1'
})

Page({
  onLoad: function(option){
    console.log(option)
  }
})

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

6 发起请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})
  1. tip: content-type 默认为 'application/json'
  2. bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常；
  3. tip: 客户端的 HTTPS TLS 版本为1.2，但 Android 的部分机型还未支持 TLS 1.2，所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本；
  4. tip: 要注意 method 的 value 必须为大写（例如：GET）；
  5. tip: url 中不能有端口；
  6. tip: request 的默认超时时间和最大超时时间都是 60s
  7. tip: request 的最大并发数是 5
  8. tip: 网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。

7 WXSS

8 模板

<template name="postItem">
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="{{avatar}}"></image>
      <text class="post-date">{{date}}</text>
    </view>
    <text class="post-title">{{title}}</text>
    <image class="post-image" src="{{imgSrc}}"></image>
    <text class="post-content">{{content}}
    </text>
    <view class="post-like">
      <image class="post-like-image" src="/images/icon/chat.png"></image>
      <text class="post-like-font">{{collection}}</text>
      <image class="post-like-image" src="/images/icon/view.png"></image>
      <text class="post-like-font">{{reading}}</text>
    </view>
  </view>
</template>

使用模板

<import src="post-item/post-item-template.wxml" />

<template is="postItem" data="{{...item}}" />

item 是模板所需要的数据。模板中不能写js，只是数据展示。

9 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages

window

tabBar

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

tabBar的样式是固定的。上边为图标，下边为文字说明。

10 常用组件

11 搜索小程序

值得注意的是，小程序可配置最多10个与业务相关的关键词，关键词在审核通过后，会和小程序的服务质量、用户使用情况等因素，共同影响搜索结果。每30天可以修改3次。

关键词设置 可配置最多10个与业务相关的关键词，关键词在审核通过后，会和小程序的服务质量、用户使用情况等因素，共同影响搜索结果。

相关链接

12 wx.login(OBJECT)

//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });
  }
})

code 换取 session_key

​ 这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。

接口地址：

//正常返回的JSON数据包
{
      "openid": "OPENID",
      "session_key": "SESSIONKEY"
}
//错误时返回JSON数据包(示例为Code无效)
{
    "errcode": 40029,
    "errmsg": "invalid code"
}

13 微信小程序支付

要先到微信公众平台开通微信支付，绑定微信支付商户号

步骤

A：小程序向服务端发送商品详情、金额、openid

B：服务端向微信统一下单

C：服务器收到返回信息二次签名发回给小程序

D：小程序发起支付

E：服务端收到回调

小程序向服务端发送商品详情、金额、openid

  wx.request({
    url:'test.php',
    data:{
      openid:'',     //openid
      tatal_free:'', //商品金额
      wx_body:''     //商品描述
    }
  })

然后服务端接收小程序发来的信息后 会发起统一下单

服务器下单完成后会返回签名参数

{
  'timeStamp': '',
  'nonceStr': '',
  'package': '',
  'signType': 'MD5',
  'paySign': ''
}

前端拿到签名参数后发起支付

wx.requestPayment({
  'timeStamp': '',
  'nonceStr': '',
  'package': '',
  'signType': 'MD5',
  'paySign': '',
  'success':function(res){
    wx.showToast({
      title: '支付成功'
    })
  },
  'fail':function(res){},
  'complete':function(res){}
})

几点注意

  {
    data:'服务器返回的数据',
    errMsg:'错误信息',
    statusCode:HTTP状态码
  }

特别注意，在开发者工具和ios中，res.statusCode的数据类型是一个数值，而在Android中的数据类型是一个字符串，所以在判断res.statusCode时不能直接使用===操作符，而应该使用==操作符。

上一篇 下一篇

猜你喜欢

热点阅读