网站建设业务介绍第一设计

微信小程序三个实例带你入门

前置说明

1. 新建微信小程序项目时，默认使用云开发服务（不需要云开发可以关闭）

2. 项目目录及文件含义查看微信官方文档

3. app.json部分重点说明
   

开发一个默认页面

我们新建componet文件夹，在componet中新建submit文件夹，最后新建名为submit的page页，结果如下。

然后在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.codeconsole.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.titlewx.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赋值})},
})

---

更多微信小程序相关查看我的程序员提升专栏，有需要请评论区留言。