专业知识

微信小程序基础

发布日期：2018-08-21

前言

什么是微信小程序，它是一种轻量级的APP，它与常规App来说，无需下载安装即可使用，它嵌于微信App中，要使用微信小程序你只需要搜索一下微信小程序的名称就好，如近期的“Google的画图”小程序等，小程序不同于APP一点的是，小程序成本低，前期宣传，可以靠扫描二维码，分享群，朋友圈等，来提高微信小程序的使用。无需安装即可下载的特点，也深受广大群众的喜欢。

介绍

小程序是一种用完即走的那么一种模式，从开始的B2C模式，人与商品，到P2P模式，人与人，在到C2P模式，人与服务。

小程序就是那么一种人与服务，小程序不用下载？

不是的，只是它的下载很小，你根本体会不到它的下载，而且对于那种要停留下来很久的，小程序一般不适用，对于订票，购票，小游戏，等。

用于对某款APP中的某功能划分出来做小程序很实用，是用来服务人的产品，想我们手机中的支付宝，里面有很多功能镶入到框框里。

如今，小程序的日常应用，如去一家店吃面时，不用叫服务员点餐而是有个二维码在你的桌上，用你的手机扫一扫就行。

微信小程序的招喜特点

微信小程序实现了“触手可及”的梦想，用户扫一扫或在微信内部搜一搜就可找到应用即可使用，也体现了“用完即走”的概念，无需下载与安装，小程序也具有APP应用软件的大部分实现的功能，无处不在，应用方便，这使得小程序的热度不同上涨。

微信小程序的使用

这里微信小程序的使用，开发，可自行百度，自己注册一个自己的小程序，这很简单，点击了解开发内容：微信小程序开发基础，微信小程序框架与组件，看完即可。

调式的功能

每款开发工具具有调式的功能才会有人支持，微信小程序的调用工具有Console,Sources,Network,Storage,AppData,wxml等，微信小程序上有个调式器的按钮就是了。

Console的窗口就是用来显示小程序的输出的错误信息和调式的代码。

Sources窗口是用来显示当前项目的脚本文件，看到的这些文件时通过处理后的脚本文件。

Network是用来查看发送的请求信息和调用文件的信息。

Storage窗口是用来显示当前项目使用wx.setStorage和wx.setStoraeSync的情况。

AppData窗口是用来显示当前项目，具体详细，数据情况的。

Wxml窗口是用来帮助开发者开发wxml转换后的界面，在这可以看到页面的结构，和wxss的相关属性，如同在网页可以查看代码一样的。

微信小程序配置

框架配置文件.png

这里直接复制小程序自动生成的代码：

//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

}

})

{

// 配置页面路径

"pages":[

"pages/index/index",

"pages/logs/logs"

// 配置窗口的表现

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "dashucoding",

"navigationBarTextStyle":"black"

// 配置标签的导航

"tabBar": {

"list": [{

"pagePath": "pages/index/index",

"text": "sy"

},{

"pagePath": "pages/logs/logs",

"text": "rz"

}]

// 配置网络超时

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

// 配置debug模式

"debug": true

}

窗口的表现属性

表现属性：状态栏，导航条，标题，窗口背景

设置导航条的背景颜色：navigationBarBackgroundColor

设置导航条文字：navigationBarTitleText

设置导航条文字颜色：navigationBarTextStyle

设置窗口是否支持下拉刷新：enablePullDownRefresh

设置窗口的背景颜色：backgroundColor

下拉 loading 的样式，仅支持 dark / light：backgroundTextStyle

默认的全局样式

/**app.wxss**/

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

工具类文件

// utils.js 存放工具来的文件

const formatTime = date => {

const year = date.getFullYear()

const month = date.getMonth() + 1

const day = date.getDate()

const hour = date.getHours()

const minute = date.getMinutes()

const second = date.getSeconds()

return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')

}

const formatNumber = n => {

n = n.toString()

return n[1] ? n : '0' + n

}

// 通过 module.exports 将定义的函数名称进行注册，才可以让其他页面使用

module.exports = {

formatTime: formatTime

}

页面文件

框架页面文件.png

逻辑层

小程序的逻辑层编写类似JavaScript，但是扩充了一些内容，也有的地方有写变动。主要的App()和Page方法。

App()注册APP

App() 函数用来注册一个小程序，接收一个object 参数，用来指定小程序的生命周期函数等。

示例代码：

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'

})

getApp()方法可以用来获取到小程序实例。

// other.js

var appInstance = getApp()

// I am global data

console.log(appInstance.globalData)

注意：

注意

Page()注册页面

函数Page()用来注册一个页面，接受一个 Object 参数，其指定页面的初始数据、生命周期函数和事件处理函数等。

示例代码：

//index.js

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.

onPageScroll: function() {

// Do something when page scroll

onTabItemTap(item) {

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

// Event handler.

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

}, function() {

// this is setData callback

})

customData: {

hi: 'MINA'

}

})

视图层

视图层.png

微信小程序视图层.png

微信小程序组件

微信小程序组件.png

微信小程序API

wx.request(OBJECT)发起网络请求

从网络上找到一个数据地址：http://www.phonegap100.com/appapi.php?a=getPortalCate

</view>

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

onLoad: function () {

var that = this;

wx.request({

// 开发者服务器接口地址

url: 'http://www.phonegap100.com/appapi.php?a=getPortalCate', //仅为示例，并非真实的接口地址

data: {

// 请求的参数

// 有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

method: 'GET',

// 设置请求的 header，header 中不能设置 Referer。

header: {

'content-type': 'application/json' // 默认值

// 收到开发者服务成功返回的回调函数

success: function (res) {

// 开发者服务器返回的数据

console.log(res.data)

that.setData({

logs:res.data.result

})

}

})

}

})

获取的数据：

获取的数据

显示的数据

文件的上传，下载

wx.chooseImage(OBJECT)API调用

微信小程序开发上传图片功能实例

效果图

</view>

//index.js

//获取应用实例

var app = getApp()

Page({

data: {

tempFilePaths: '',

/**

* 上传图片

chooseimage: function() {

var _this = this;

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

success: function(res) {

//提示上传成功

wx.showToast({

title: '上传成功',

icon: 'success',

duration: 2000

});

_this.setData({

tempFilePaths: res.tempFilePaths

})

}

})

}

})

WebSocket会话API

利用WebSocket会话可以用来创建一个会话连接，它可以通信，如聊天等。

wx.connectSocket(OBJECT).png

示例代码：

wx.connectSocket({

url: 'wss://example.qq.com',

data:{

x: '',

y: ''

header:{

'content-type': 'application/json'

protocols: ['protocol1'],

method:"GET"

})

常用的api调用

1.wx.onSocketOpen(CALLBACK)监听WebSocket连接打开事件

2.wx.onSocketError(CALLBACK)监听WebSocket错误

3.wx.sendSocketMessage(OBJECT)通过 WebSocket连接发送数据

4.wx.onSocketMessage(CALLBACK)监听WebSocket接受到服务器的消息事件

5.wx.closeSocket(OBJECT)关闭 WebSocket 连接

6.wx.onSocketClose(CALLBACK)监听WebSocket关闭