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

前置说明

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.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赋值
 })
 },
})

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