微信小程序三个实例入门

微信小程序三个实例入门前置说明创建新的微信小程序项目时，默认使用云开发服务（没有云开发可以关闭）项目目录和文件含义查看微信官方文档的app.json部分重点是开发一个默认页面。我们创建一个componet文件夹，在componet中创建一个submit文件夹，最后创建一个名为submit的页面。结果如下。然后在app.json中配置一个默认页面“componet/submit/submit”。最后在submit.js中配置加载数据，在submit.json中配置导航栏和标签栏数据，在wxml中配置页面结构，在wxss中配置结构样式，ctrl+s或者直接保存运行，结果如下如下。开发动态变化数据的单页（以用户授权为例）渲染展示：说明：我们可以通过this.setData({key:value})重新赋值数据，然后数据就会动态展示在这一页。本例中将中奖获得的userInfo对象数据显示在单个页面上，并显示源码。js源码：constapp=getApp()Page({data:{//判断小程序的API、回调、参数、组件等是否在当前版本可用。canIUse:wx.canIUse('button.open-type.getUserInfo'),isHide:false,userInfo:{},haveUser:false},onLoad:function(){varthat=this;//检查wx.getSetting是否被授权:res=>{//得到用户的code后:res.codeconsole.log("User'scode:"+res.code);//可以传给后台，然后解析得到用户的openid//或者直接使用微信提供的接口获取openid的方法如下：//wx.request({////填写自己的APPID和SECRET//url:'https://api.weixin.qq.com/sns/jscode2session?appid=你自己的APPID&secret=OwnSECRET&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){//用户按下了允许授权按钮varthat=this;//获取用户信息，打印到控制台看到app.globalData.userInfo=e.detail.userInfo;//授权成功后，修改isHide的值，显示执行页面，显示授权页面Hidethat.setData({isHide:false,haveUser:true,userInfo:e.detail.userInfo});}else{//用户按下了拒绝按钮wx.showModal({title:'Warning',content:'你如果点击拒绝授权，将无法进入小程序，请授权后进入！！！',showCancel:false,confirmText:'返回授权',success:function(res){//用户还没有授权成功，所以不需要改变isHide的值if(res.confirm){console.log('用户点击了“返回授权”');}}});}}})需要提示点：this只在上面函数中的最外层可用，如果函数中嵌套函数，则嵌套函数中的this代表嵌套函数，解决方法：声明var那个=this，并用它来表示应用程序本身json源码：{"navigationBarTitleText":"登录"}wxss源码：.header{margin:90rpx090rpx50rpx;border-bottom:1pxsolid#ccc;文本对齐：居中；宽度：650rpx；高度：300rpx；line-height:450rpx;}.headerimage{宽度:200rpx;高度：200rpx；}.content{margin-left：50rpx；margin-bottom:90rpx;}/**index.wxss**/.userinfo{display:flex;弹性方向：列；对齐项目：居中；}.userinfo-avatar{宽度：128rpx；高度：128rpx；保证金：20rpx；边界半径：50%；}.userinfo-nickname{颜色：#aaa;}.usermotto{margin-top:200px;}.contenttext{显示：块；颜色：#9d9d9d；边距顶部：40rpx；}.bottom{边界半径：80rpx；保证金：70rpx50rpx；font-size:35rpx;}wxml源代码：申请以下权限获取您的公开信息（昵称、头像等）授权登录请升级微信版本{{userInfo.nickName}}wxml中有很多标签可以绑定事件（见api文档），我经常使用bindtap、catchsubmit、catchreset这些绑定属性来实现绑定，开发一个页面间数据传递的实例。我们都知道http请求包括：postgetheadpatchoptionsputdeletetraceconnect常用的postget，在微信小程序中对应的实现方法是全局url链接。我将介绍这两种URL传输。我们可以使用navigator（类似于html中的a标签）来实现跳转，跳转时可以携带参数。我们也可以在绑定事件中使用wx.navigatorto来实现跳转，绑定请查看api文档。参数可以用form实现，这里不涉及太多，查看【文档】（https://developers.weixin.qq....附url传输源码：login.wxml传index.js//pages/index/index.jsPage({data:{title:''},onLoad:function(options){console.log(options)//打印options，可以看到title的值可以从this.setData({title:options.title//给页面中的标题赋值})},})index.html{{title}}两次全局传输全局保存的数据需要满足整个小程序的要求，比如一个视频播放小程序需要用户信息，但是一个视频信息不需要保存，否则会占用全局缓存通过整个小程序会迅速增加，造成严重的宕机。话不多说，附上源码。app.js//app.jsApp({globalData:{}})index.wxmlPassindex.js//index.js//获取应用实例constapp=getApp()Page({data:{title:'参数传递'},go_Demo:function(){app.globalData.title=this.data.titlewx.navigateTo({url:'../demo/demo',})}})demo.js//pages/demo/demo.js//获取应用实例constapp=getApp()Page({data:{title:''},onLoad:function(options){console.log(app.globalData.title)//打印options，可以看到从这里可以得到title的值.setData({title:app.globalData.title//给页面的标题赋值})},})更多关于微信小程序的内容可以查看我的程序员提升专栏，欢迎在有需要的评论区。