微信小程序基础
前言
什么是微信小程序,它是一种轻量级的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的相关属性,如同在网页可以查看代码一样的。
微信小程序配置
这里直接复制小程序自动生成的代码:
//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
}
页面文件
逻辑层
小程序的逻辑层编写类似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'
}
})
视图层
微信小程序组件
微信小程序API
wx.request(OBJECT)发起网络请求
从网络上找到一个数据地址:http://www.phonegap100.com/appapi.php?a=getPortalCate
<!--index.wxml-->
<view wx:for="{{logs}}" wx:for-item="value">
{{value.catname}}
</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
调用
微信小程序开发上传图片功能实例
<!--index.wxml-->
<view style='padding:1rem'>
<button type="primary"bindtap="chooseimage" >上传图片</button>
<image src="{{tempFilePaths}}" style=' width:100%; height:900rpx; margin:1rem 0;'/>
</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({
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关闭
图片处理提供的API
API官方参考
参考地址:https://developers.weixin.qq.com/miniprogram/dev/api/
小结
结语
- 本文主要讲解 微信小程序基础
- 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
微信小程序基础的更多相关文章
- 微信小程序基础入门
准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序基础知识
一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...
- 微信小程序基础知识笔记
微信小程序笔记 文件构成 全局文件 app.json 小程序全局配置文件,必要,自动生成 app.js 小程序入口JS文件,一般只需申明全局变量.处理生命周期以及版本升级即可,必要 app.wxss ...
- 微信小程序基础之在微信上显示和体验小程序?
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
- 微信小程序基础之交互操作控件
好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 微信小程序基础之试图控件View、ScrollView、Swiper
今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...
- 微信小程序基础之创建使用教程
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取 ...
随机推荐
- 用python优雅打开文件及上下文管理协议
有次面试被问到如何优雅地打开一个文件? 那就是用with语句,调用过后可以自动关闭. 但是为什么使用with语句就可以自动关闭呢,原因就是上下文管理协议. 上下文管理协议:包含方法 __e ...
- C#、Unity 数据类型的默认值
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Main : M ...
- 译:SOS_SCHEDULER_YIELD类型等待在虚拟机环境中的增多
原文出处:Increased SOS_SCHEDULER_YIELD waits on virtual machines 注: 原文的用词是Increased,想译作增强(增长),或者加强,这么译起来 ...
- DOM 扩展
1.选择符API,selectors API 可以使用CSS选择符匹配查找节点 1) querySelector(selector),接受一个CSS选择符,返回调用该函数的节点后代中第一个匹配的元素 ...
- etcd集群部署与遇到的坑
在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一下,为了以后更好操作. ETCD参数说明 —data-dir 指定节点的数据存储目录,这些数据包括节点ID,集群ID,集群 ...
- 信号基础知识---单频矩形脉冲信号CW
%CW%参考:声呐技术 P27,31clc;close all;clear all;%参数-------------------------f0=50;T=0.1;%时宽B=1/T;fs=1000;% ...
- 220. Contains Duplicate III 数组指针差k数值差t
[抄题]: Given an array of integers, find out whether there are two distinct indices i and j in the arr ...
- [leetcode]75. Sort Colors三色排序
Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...
- 图片识别文字, OCR
文章引用自: https://www.cnblogs.com/stone_w/archive/2011/10/08/2202397.html 方式一.Asprise-OCR的使用. Asprise-O ...
- var
在函数中,使用var声明的变量,为局部变量,只能在函数内部访问. 不使用var声明的变量,为全局变量,在函数外边也能访问. 没有var的情况 <script type="text/ja ...