小程序入门知识点（二）
开发步骤
先去官网注册申请小程序账号，在官方后台配置小程序的名称头像以及简介和所属行业应用场景等信息，完善后认证审核，认证完成后才拥权限编辑发布小程序，此时会生成新的小程序APPID，这个APPID在开发设置里面，旧的原始额AppID在 基本设置里面。
一个小程序主体部分由三个文件组成，必须放在项目的根目录
app.js是小程序逻辑
app.json是小程序公共设置
app.wxss是小程序公共样式表
一个小程序页面由四个文件组成，分别是：
文件类型必填作用
js是页面逻辑
wxml是页面结构
wxss是页面样式表
json是页面配置
Pages是构建小程序页面
Window是小程序主要颜色等信息
tabBar是配置小程序底部分页
数据绑定
<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
事件
<view bindtap="add">{{count}}</view>
Page({
data: {
count: 1
},
add(e) {
this.setData({
count: this.data.count + 1
})
}
})
基础获取用户信息：
在app.json中配置页面路径：因为小程序官方会在用户打开小程序时候发起一次用户授权，但是这不是我们想要的。
我们需要判断用户登录来进行授权，授权通过就视为登陆成功进入主页，同时缓存用户登录信息，发给后台存储。
点击按钮就开始授权获取用户信息，成功后打开小程序首页，反之停留当前页。第二次进入判断是否授权过，授权过直接进入主页，否则再次授权。全部依赖于Button的组件功能，同时用wx.canIUse(‘button.open-type.getUserInfo’)来判断微信版本是否达标。
这样就用到button组件的功能：
申请获取以下权限
请升级微信版本
同时在js页面中配置这些信息：
// pages/login/index.js
var e = require("../../utils/util.js");
Page({
data: {
errorMsg: "",
errorNum: 0,
userInfo: null,
LoginImg: "",
canIUse: wx.canIUse('button.open-type.getUserInfo') //判断小程序的API，回调，参数，组件等是否在当前版本可用。
},
onLoad: function() {
var that = this;
// 查看是否授权
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function(res) {
//从数据库获取用户信息
//用户已经授权过
// console.log(res)
var myImg = res.rawData;
wx.setStorageSync("LoginImg", myImg)
wx.showToast({
title: "登录中",
icon: "loading",
duration: 400
})
setTimeout(function() {
wx.reLaunch({
url: '../study/study'
})
}, 800)
}
});
}
}
})
},
bindGetUserInfo: function(a) {
if (a.detail.userInfo) {
//用户按了允许授权按钮
// console.log(a.detail.rawData)
var t = this;
var myImg = a.detail.rawData
wx.setStorageSync("LoginImg", myImg)
wx.reLaunch({
url: '../study/study'
})
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
},
})
这样就获取并存储到了用户的信息。基础样式如下
/* pages/login/index.wxss */
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
background-color:#e90a0a;
border-radius:50%;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
放在末尾，对用户使用的版本进行验证的重要性：
小程序的功能都是有对应的基础调试库的，所以我进行了用户打开的时候进行版本判断：
同时在开发工具上也有对应的基础库设置：
还有开发者后台的线上基础库设置：
生命周期：
page是页面全局生命周期，从始至终的，onload是页面打开到加载完成之间的活动，onready是加载完成显示的，在onload之后，剩下的onshow,onhide等等都是纯字面意思，显示或隐藏，上拉加载，下拉刷新，按钮分享，这些都是操作同时出发的，离开操作就结束
data就是数据，页面数据在初次存储是data,在发生变化时是在this.setData({})函数中存储
跳转操作：
页面内的tabar是在底部像按钮菜单一样的东西，除此之外我们还有使用bindtap以及navaigator和Button等组件和函数方法：
跳转：navigateto,redirecto,relunch，前者页面内跳转，后两者均为关闭页面并跳转新页面。
