微信小程序之校园导航图-打卡毕业设计第一天

迷南。 2023-06-25 06:02 42阅读 0赞

**前言**  
之前一直在准备考研，博客一直没更过，前两天刚考完研，休息了两天就投入到毕设的学习当中，我的毕设是微信小程序，对于微信小程序我是一点都不会，我现在是从小白开始，有要做这方面毕设的可以关注一下，大家一起学习交流。  
**1.前期准备工作**  
首先要在[微信公众平台][Link 1]注册一个账号，要用未绑定微信公众号的邮箱。填写完基本信息之后就是要下载微信开发工具，这个也很简单，只需要在小程序开发与管理中的开发工具中找到普通小程序开发者工具然后下载就可以了，建议下载稳定版。[微信开发者工具下载地址][Link 2]，具体操作流程如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]

做好前期准备工作接下来就是开始学习微信小程序了。  
**2.怎么使用微信小程序工具**  
当我们首次打开微信开发者工具，其界面如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]

我们点击加号就可以新建自己的项目了，我们需要记住自己注册账号的APPID，因为在新建小程序时需要用到。其界面如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 4]  
这里有一个后端服务，小程序云开发建议不要选，后端服务我们可以用javascript写，不需要用云开发。  
**3.框架和配置文件**  
框架如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 5]  
对于一些具体组件还有框架我建议大家去微信开放文档看一下，上面有简单的介绍，[微信开放文档][Link 3]。  
**4.数据绑定**  
在wxml文件中

<text>hello{
       {msg}}</text>
    
    <view>
    你的姓名和年龄{
       {obj.name+obj.age}}
    </view>
    
    <view wx:if="{
       {show}}">
    如果show为true则显示此条消息，如果show为false则不显示则条消息
    </view>
    
    <view id="item-{
       {id}}">
    </view>
    
    <view class='list'>
    <view class='item' wx:for="{
       {list}}">
    {
       {index}}--{
       {item}}
    </view>
    </view>
    -------------------------
    
    <view class="list">
    <view class="item" wx:for="{
       {list1}}">
    {
       {index}}----{
       {item.title}}
    </view>
    </view>
    -------------------------
    
    <view class="list">
    <view class="item" wx:for="{
       {list2}}">
    {
       {item.cate}}
    <view  wx:for="{
       {item.list}}">
    ---{
       {item.title}}
    </view>
    </view>
    </view>
    ----------------------------------
    
    
    <view wx:for="{
       {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
      <view wx:for="{
       {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
        <view wx:if="{
       {i <= j}}">
          {
       {i}} * {
       {j}} = {
       {i * j}}
        </view>
      </view>
    </view>

在JS文件中

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        msg:'小程序',
        obj:{
          name:'张三',
          age:32
        },
        show:false,
        id:1234,
        list:['111','222','333'],
        list1:
        [
          {
            title:'体育新闻',
          },
            {
              title: '娱乐新闻',
            },
            {
              title: '军事新闻',
            },
        ],
        list2:
        [
         {
           cate:'宝马',
              list: [
                { title: '宝马1系' }, { title: '宝马2系' }, { title: '宝马3系' }, { title: '宝马4系' }, { title: '宝马5系' }],
         },
            {
              cate: '大众',
              list: [
                { title: '大众1系' }, { title: '大众2系' }, { title: '大众3系' }, { title: '大众4系' }, { title: '大众5系' }],
            },
        ],
      },

运行结果  
![在这里插入图片描述][20191227145520790.png]  
**5.首页**  
index.wxml

<view class="container">
    <image class="ig" src="{
       {userInfo.avatarUrl}}"></image>
    <button bindgetuserinfo="handleGetUserInfo" open-type="getUserInfo" style='display:{
       {isShow?"block":"none"}}'>获取用户登录信息</button>
    <text class="username">hello {
       {userInfo.nickName}}</text>
    <view class="bd" catchtap="handleClick">
    <text>欢迎来到合肥学院</text>
    </view>
    </view>

index.wxss

.container
    {
    display: flex;/*弹性布局*/
    flex-direction: column;/*居中显示*/
    align-items: center;
    
    }
    .ig
    {
      width:200rpx;
      height: 200rpx;
      border-radius: 100rpx;/*圆角*/
      margin: 100rpx 0;
    }
    .username{
      font-size: 32rpx;
      font-weight: bold;
      margin: 100rpx 0;
    }
    .bd
    {
      width: 300rpx;
      height: 80rpx;
      font-size: 28rpx;
      border:1px solid #999;
      text-align: center;
      line-height: 80rpx;
      border-radius: 10rpx;
       background-color: #66FF00;
    }
    button{
      font-size: 32rpx;
      border: 1px solid #999;
      background-color: #66FF00;
    
    }

index.js

// Pages/index/index.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        userInfo:{},
        isShow:true,
       
      },
    handleClick()
    {
      //点击此按钮跳转到list页面
      wx.navigateTo({
        url: '/Pages/list/list'
      })
    
    },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(this);
        this.getUserInfo();
       
    
      },
      getUserInfo()
      {
        //判断用户是否授权
        wx.getSetting({
          success: (data) => {
            console.log(data);
            if (data.authSetting['scope.userInfo']) {
              //用户已经授权
              this.setData({
                isShow: false
              });
            }
            //用户没有授权
            else {
              this.setData({
                isShow: true
              });
            }
    
          }
        })
        //获取用户登录信息
        wx.getUserInfo({
          success: (data) => {
            console.log(data);
            //更新data中的userinfo
            this.setData({
              userInfo: data.userInfo
            });
          },
          fail: (data) => {
           
          },
        })
      },
      handleGetUserInfo(data){
    console.log('用户点击了',data);
    //判断用户点击的是否是允许
    if(data.detail.rawData){
      //用户点击的是允许
      this.getUserInfo();
    }
      },

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 7]  
**页面跳转**  
除了刚刚的index页面还应该新建一个list页面，在欢迎来到合肥学院的view上绑定点击事件handleClick，实现页面跳转的方法为wx.navigateTo(\{  
url: ‘/Pages/list/list’  
\})  
URL为跳转页面的绝对路径。  
在index.js中

handleClick()
    {
      //点击此按钮跳转到list页面
      wx.navigateTo({
        url: '/Pages/list/list'
      })
    },

list页面接下来完善后再发出来。

[Link 1]: https://mp.weixin.qq.com
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226140504476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191226140615381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191226140631885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191226140907852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191226142953776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191226140752482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[20191227145520790.png]: https://img-blog.csdnimg.cn/20191227145520790.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191231182940743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191231182954753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg==,size_16,color_FFFFFF,t_70