微信小程序三个实例带你入门
前置说明
- 新建微信小程序项目时，默认使用云开发服务（不需要云开发可以关闭）
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V2Z5HIyl-1595050183309)(en-resource://database/501:1)]](https://img-blog.csdnimg.cn/2020071813320771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3NzU1Ng==,size_16,color_FFFFFF,t_70)
-
项目目录及文件含义查看微信官方文档
-
app.json部分重点说明
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-opsmnfuD-1595050183314)(en-resource://database/503:1)]](https://img-blog.csdnimg.cn/2020071813321968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3NzU1Ng==,size_16,color_FFFFFF,t_70)
开发一个默认页面
我们新建componet文件夹，在componet中新建submit文件夹，最后新建名为submit的page页，结果如下。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Zk3AvU9-1595050183315)(en-resource://database/507:1)]](https://img-blog.csdnimg.cn/20200718133230322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3NzU1Ng==,size_16,color_FFFFFF,t_70)
然后在app.json中配置一个默认页面“componet/submit/submit"。
最后在submit.js中配置加载数据，在submit.json中配置导航栏及标签栏数据，在wxml配置页面结构，在wxss中配置结构样式，ctrl+s或直接保存运行，结果如下。
开发一个数据动态变化的单页面（以用户授权为例）
效果图展示：
讲解：
我们可以在onload加载方法中或者在任意一个自定义的绑定函数或者监听函数中通过this.setData({key:value})的形式对数据重新赋值，之后该数据就会动态呈现在页面中，本实例中奖获取到的userInfo对象数据显示在单个页面中,源码展示。
js源码：
const app = getApp()
Page({
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo'),
isHide: false,
userInfo:{
},
haveUser:false
},
onLoad: function () {
var that = this;
// 查看是否授权
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function (res) {
wx.login({
success: res => {
// 获取到用户的 code 之后：res.code
console.log("用户的code:" + res.code);
// 可以传给后台，再经过解析获取用户的 openid
// 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：
// wx.request({
// // 自行补上自己的 APPID 和 SECRET
// url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
// success: res => {
// // 获取到用户的 openid
// console.log("用户的openid:" + res.data.openid);
// }
// });
}
});
}
});
} else {
// 用户没有授权
// 改变 isHide 的值，显示授权页面
that.setData({
isHide: true
});
}
}
});
},
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
//用户按了允许授权按钮
var that = this;
// 获取到用户的信息了，打印到控制台上看下
app.globalData.userInfo = e.detail.userInfo;
//授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
that.setData({
isHide: false,
haveUser:true,
userInfo:e.detail.userInfo
});
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
// 用户没有授权成功，不需要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
}
})
需要提示点：this在上述函数中仅在最外层可用，若函数中嵌套函数，则嵌套函数中的this表示的是该嵌套函数，解决办法：声明var that = this,使用that代表app自身。
json源码：
{
"navigationBarTitleText": "登录"
}
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;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
wxml源码：
<view wx:if="{
{isHide}}">
<view wx:if="{
{canIUse}}" >
<view class='header'>
<image src='/images/template/1.jpg'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else>请升级微信版本</view>
</view>
<view class="userinfo" wx:if="{
{haveUser}}">
<block >
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
</view>
在wxml中有很多标签都可以绑定事件（查看api文档）即可，我经常使用bindtap,catchsubmit,catchreset这些绑定属性实现绑定
开发一个页面间数据传递的实例
我们都知道http请求包括：post get head patch options put delete trace connect
常用的有post get，在微信小程序中对应实现方式是全局 url链接，这两个我都介绍一下。
一 URL传递。
我们可以使用navigator(类似html中的a标签）实现跳转，跳转时可携带参数。我们也可以通过绑定事件中使用wx.navigatorto等实现跳转，绑定请自行查看api文档。参数可以使用form实现，这里不牵扯太多，自行查看文档
URL传递源码附上：
login.wxml
<!--login.wxml-->
<view class="container">
<!-- 使用navigator组件 -->
<navigator url="pages/index/index?title=我是传递值">传递</navigator>
</view>
index.js
// pages/index/index.js
Page({
data: {
title:''
},
onLoad: function (options) {
console.log(options) //打印options,可以看到title的值可以获取到
this.setData({
title:options.title //为页面中title赋值
})
},
})
index.html
<view class='container'>
{
{title}}
</view>
二 全局传递
全局保存的数据需要满足符合整个小程序都需要才可以，比如一个视频播放小程序，用户信息是需要的，而一个视频信息是不需要保存的，否则整个小程序全局所占缓存会快速升高，严重造成宕机。不多说了，源码附上。
app.js
//app.js
App({
globalData: {
}
})
index.wxml
<!--index.wxml-->
<!-- 点击触发go_Demo函数 -->
<view class="container" bindtap='go_Demo'>
传递
</view>
index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
title:'参数传递'
},
go_Demo: function() {
app.globalData.title = this.data.title
wx.navigateTo({
url: '../demo/demo',
})
}
})
demo.js
// pages/demo/demo.js
//获取应用实例
const app = getApp()
Page({
data: {
title:''
},
onLoad: function (options) {
console.log(app.globalData.title) //打印options,可以看到title的值可以获取到
this.setData({
title: app.globalData.title //为页面中title赋值
})
},
})
更多微信小程序相关查看我的程序员提升专栏，有需要请评论区留言。