大牛带您微信小程序基础
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大牛带您微信小程序基础相关的知识，希望对你有一定的参考价值。
前言
什么是微信小程序，它是一种轻量级的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
以上是关于大牛带您微信小程序基础的主要内容，如果未能解决你的问题，请参考以下文章