微信小程序入门(保姆级)

发布时间:2023-12-17 12:00

一 注册微信小程序

如果你没有微信公众平台的账号,请先进入微信公众平台首页,点击“立即注册”按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择“小程序”即可。

微信小程序入门(保姆级)_第1张图片

选择注册,填写资料

微信小程序入门(保姆级)_第2张图片

微信小程序入门(保姆级)_第3张图片

微信小程序入门(保姆级)_第4张图片

这里登录你的邮箱看看是否被激活,

微信小程序入门(保姆级)_第5张图片

前往微信公众平台输入邮箱登录进去,填写个人信息,选择主体“个人类型”,并按要求登记主体信息,主体信息提交后不可更改了。

微信小程序入门(保姆级)_第6张图片

手机扫码进行管理员身份验证

微信小程序入门(保姆级)_第7张图片

提交信息

微信小程序入门(保姆级)_第8张图片

现在你已经可以使用小程序进行开发了。

进入小程序的管理平台了,填写小程序的基本信息,包括名称、图标、描述等,提交完成之后,再添加开发者,开发者默认为管理员,我们可以新增开发者,这里只有管理员才有的权限,然后点击左侧导航栏点击“设置”,找到开发设置,获取小程序的AppID。

微信小程序入门(保姆级)_第9张图片

二 微信开发者工具

下载微信web开发者工具,根据自己的操作系统下载对应的安装包即可。打开开发者工具进行微信扫码登录开发者工具,准备开发自己的小程序吧!!!

2.1 搭建环境

2.1.1 新建项目

打开开发者工具,选择“小程序开发”,点击右下角的“+”新建项目。

选择一个空的文件夹作为项目目录,填入刚刚的AppID,再写一个项目名称,比如我这里叫做 BolgDome,点击“确定”进入工具主界面。

微信小程序入门(保姆级)_第10张图片

2.1.2 项目目录结构

微信小程序的基本文件构造和项目目录结构说明如下:

微信小程序入门(保姆级)_第11张图片

.
├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
├── project.config.json
└── utils
└── util.js

根目录下有3个文件:app.is、app.json、app.wxss,小程序必须有这3个描述APP的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个pages文件夹,用来存放小程序的各个页面。

我们可以和 web 前端开发技术做个类比:

  • wxml类似于HTML 文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件;
  • wxss类似于 CSS文件,用来编写页面样式,只是把css文件换成了wxss文件;
  • js 文件类似于前端编程中的 JavaScript 文件,用来编写小程序的页面逻辑;
  • json 文件用来配置页面的样式和行为。

2.1.3 目标成果

我们先来看看最终目标和成果,很简单,一共就三页:

微信小程序入门(保姆级)_第12张图片

微信小程序入门(保姆级)_第13张图片

微信小程序入门(保姆级)_第14张图片

2.2 小程序开发

2.2.1 步骤分解

  1. 首页
  2. 个人中心
  3. 我的博客
  4. 弹窗模拟
  5. 预览图片

2.2.2 页头页尾

在目标成果预览中我们看到,两个页面都有共同的部分 – 页头和页尾。所以在构建页面内容之前,我们先把页头和页尾处理好。我们很容易猜到,这两部分属于小程序的全局配置,因此需要修改 app.json 文件。

最初的内容如下:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

pages 属性用来设置页面路径,它是一个数组,每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需要对pages数组进行修改。

window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色

我们把页头的标题和颜色修改一下,页尾部分我们做一个tab栏来切换页面,这个属件叫做 tabBar,代码如下:

{
  "pages":[
    "pages/index/index",
    "pages/user/user",
    "pages/wdbolg/wdbolg",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },"tabBar": {
    "color": "#000000",
    "selectedColor": "#13b11c",
    "backgroundColor": "#FFFFFF",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/icon_index.png",
      "selectedIconPath": "images/icon_index.png",
      "text": "首页"
    }, {
      "pagePath": "pages/user/user",
      "iconPath": "images/icon_user.png",
      "selectedIconPath": "images/icon_user.png",
      "text": "个人中心"
    }, {
      "pagePath": "pages/wdbolg/wdbolg",
      "iconPath": "images/icon_wdbolg.png",
      "selectedIconPath": "images/icon_wdbolg.png",
      "text": "我的博客"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

(所用到的图片放在项目的image 目录,你也可以使用自己的图片)

这里用到几个tabBar的属性是color、selectedColor、backgroundColor 和 list,list 是一个数组,主要用于设定导航的路径。CTRL+S保存之后,模拟器就会自动刷新,马上可以看到效果。

pages配置:

要对应你小程序页面,比如“pages/user/user”。

tabBar的用法:

pagePath 页面的地址,页面的地址粘贴进去即可
text 图标下面的字
iconPath 点击前的图标样式
selectedIconPathsh 点击后的图标

2.2.3 首页

微信小程序入门(保姆级)_第15张图片

我的首页是默认的没有改,你们自己去改。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

2.2.4 我的博客

微信小程序入门(保姆级)_第16张图片

原来的项目中 pages 目录下只有index和logs 两个目录,因此我们还需要为第二个页面创建一个目录。

创建页面有两种方法:

  • 在目录结构的 pages 图表上,新建目录,然后在目录下逐一创建页面构成文件;
  • 在app.json 下,直接添加。

建议采用第二种方法,修改 app.json 文件:

 "pages":[
    "pages/index/index",
    "pages/user/user",
    "pages/wdbolg/wdbolg",
    "pages/logs/logs"
  ]

保存刷新之后就会发现,目录结构里自动创建了这一页。对应的,也要修改 app.json 中的 tabBar 的链接(实际上我们已经做了):

{
      "pagePath": "pages/wdbolg/wdbolg",
      "iconPath": "images/icon_wdbolg.png",
      "selectedIconPath": "images/icon_wdbolg.png",
      "text": "我的博客"
    }

然后修改wdbolg.wxml设置这一页的标题:

    <!--pages/details/details.wxml-->
    <view>
      <view class='title'>
        <text>我的博客</text>
      </view>
    </view>

修改wdbolg.wxss设置样式:

    /* pages/details/details.wxss */
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      font-size: 40rpx;
    }

这个页面是一个列表展示的页面,我们先在wdbolg.js文件中准备好数据:

    /**
     * 页面的初始数据
     */
    data: {
        showModalStatus: false,
        list: [{
            id: 0,
            name : "Vue使用Echarts",
            introduce: "一,Echarts一个基于 JavaScript 的开源可视化图表库Echarts官网。",
            src: '../../images/user.png',
            showModalStatus: false,
            catalog: [
                { section: "1. xxx" },
                { section: "2. xxx" },
                { section: "3. xxx" },
                { section: "4. xxx" },
            ]
        },{
            id: 1,
            name: "SpringBoot+Redis分布式锁",
            introduce: "本篇内容主要讲解的是redis分布式锁,下面结合模拟抢单的场景来使用它。",
            src: '../../images/user.png',
            showModalStatus: false,
            catalog: [
                { section: "1. xxx" },
                { section: "2. xxx" },
                { section: "3. xxx" },
                { section: "4. xxx" },
            ]
        }]
    },

接下来我们要使用列表渲染 (wx:for) 的方法将这些数据绑定一个数组,并在页面上重复渲染。修改 details.wxml 文件:

<view>
    <view wx:for="{{list}}" wx:key="id">
        <view class="lesson" id="{{item.id}}">
            <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
            <view class="lessonName">{{item.name}}</view>
            <view class="lessonIntroduce">{{item.introduce}}</view>
        </view>
    </view>
</view>

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。

修改 details.wxss 文件添加样式:

    .lesson {
      height: 190rpx;
      padding-left: 20rpx;
    }
    
    .lessonPic {
      position: absolute;
      height: 150rpx;
      width: 150rpx;
    }
    
    .lessonName {
      position: absolute;
      margin-left: 220rpx;
      font-size: 35rpx;
    }
    
    .lessonIntroduce {
      position: absolute;
      margin-left: 220rpx;
      margin-top: 60rpx;
      margin-right: 20rpx;
      color: rgb(185, 161, 161);
      font-size: 28rpx;
    }

好啦,第二页面也完成了。

2.2.5 个人中心

微信小程序入门(保姆级)_第17张图片

简单起见,我们就在pages/user/user目录下实现“个人中心”页面好了。双击打开user.wxml,初始内容是没有的。我们可以编写自己的代码,如下:

<view class="view_contain">
  <!-- 第一部分 -->
  <view class="view_1">
    <view class="view_image_text">
      <image class="image_radius" src="../../images/user.png" />
      <text>张三</text>
    </view>
  </view>

  <!-- 第二部分 -->
  <view class="view_3">
    <view class="list-item">
      <image class="item-image" src="../../image/test5.png"></image>
      <text class="item-text">我的收藏</text>
      <image class="image-jiantou" src="../../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../../image/test6.png"></image>
      <text class="item-text">我的评价</text>
      <image class="image-jiantou" src="../../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../../image/test8.png"></image>
      <text class="item-text">版本更新</text>
      <image class="image-jiantou" src="../../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
    <view class="list-item">
      <image class="item-image" src="../../image/test12.png"></image>
      <text class="item-text">分享邀请</text>
      <image class="image-jiantou" src="../../images/jiantou.png"></image>
    </view>
    <view class="line"></view>
  </view>
</view>

接下来我们来修改一下样式吧:user.wxss里面修改样式

/* 使用page就是为了保证  满屏 */

page {
  width: 100%;
  height: 100%;
}

.view_contain {
  width: 100%;
  height: 100%;
  background: #f0eeed
}

/* 第一部分 */

.view_1 {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 25%;
  background: #a0deee;
}

.view_image_text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.image_radius {
  height: 50px;
  width: 50px;
  border-radius: 30px;
}

/* 第二部分 */

.view_3 {
  width: 100%;
  height: 50%;
  /* background: #f0eeed; */
}

.list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80rpx;
  margin-top: 20rpx;
  position: relative; /*父元素位置要设置为相对*/
  background: white;
}

.item-image {
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}

.item-text {
  color: gray;
  font-size: 35rpx;
  margin-left: 20rpx;
}

.image-jiantou {
  width: 20rpx;
  height: 35rpx;
  position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
  right: 0; /* 靠右调节 */
  margin-right: 35rpx;
}

/* 黑线 使得产生阴影效果 */

.line {
  width: 100%;
  height: 3rpx;
  background: lightgray;
  margin-left: 90rpx;
}

保存刷新,“个人中心”页面就完成了。

2.2.6 弹窗模拟

微信小程序入门(保姆级)_第18张图片

接下来我们要在“我的博客”页面模拟一个弹窗的效果,正常的时候不显示,只有在点击的时候才出现,摁下面的“确定”就会消失。

完了实现这个功能,我们要在组件中绑定一个事件处理函数 bindtap,点击该组件的时候,小程序会在该页面对应的 Page 中找到相应的事件处理函数。

我们先在wdbolg…js 中为每一列数据里引入一个 boolean 变量showModalStatus 来描述对应的弹窗状态,并且初始值为false,表示不显示。同时外层也增加一个初始值为false 的 showModalStatus 变量实现遮罩效果。如下:

 data: {
        showModalStatus: false,
        list: [{
            id: 0,
            name : "Vue使用Echarts",
            introduce: "一,Echarts一个基于 JavaScript 的开源可视化图表库Echarts官网。",
            src: '../../images/user.png',
            showModalStatus: false,
            catalog: [
                { section: "1. xxx" },
                { section: "2. xxx" },
                { section: "3. xxx" },
                { section: "4. xxx" },
            ]
        }]
 }

然后在 wdbolg…wxml 中插入弹窗,并用条件渲染(wx:if):来判断是否渲染(显示)弹窗。同时为每一个item添加data-statu来表示弹窗的状态。如下:

<view>
    <view wx:for="{{list}}" wx:key="id">
        <view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{item.id}}">
            <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
            <view class="lessonName">{{item.name}}</view>
            <view class="lessonIntroduce">{{item.introduce}}</view>
        </view>

        <!-- 弹窗 -->
        <view class='drawer_box' wx:if='{{item.showModalStatus}}' id='{{item.id}}'>
            <view class="title">{{item.name}}</view>
            <view class='drawer_content'>
                <view class='title' wx:for='{{item.catalog}}' wx:for-item='catalog' wx:key='id'>
                    {{catalog.section}}
                </view>
            </view>
            <!-- 确定按钮 -->
            <view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view>
        </view>
    </view>

    <!-- 遮罩层 -->
    <view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view>
</view>

在 wdbolg…js 添加 powerDrawer 事件处理,包括显示和关闭事件:

 powerDrawer: function (e) {
        console.log("clicked");
    
        var currentStatu = e.currentTarget.dataset.statu;
        var index = e.currentTarget.id;

        // 关闭
        if (currentStatu == 'close') {
          this.data.list[index].showModalStatus = false;
          this.setData({
            showModalStatus: false,
            list: this.data.list,
          });
        }
    
        // 显示
        if (currentStatu == 'open') {
          this.data.list[index].showModalStatus = true;
          this.setData({
            showModalStatus: true,
            list: this.data.list,
          });
        }
      },

最后在wdbolg.wxss设置一下弹窗和遮罩层的样式:

    .drawer_box {
      width: 650rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      z-index: 1001;
      background: #FAFAFA;
      margin: -150px 50rpx 0 50rpx;
    }
    
    .drawer_content {
      border-top: 1.5px solid #E8E8EA;
      height: 210px;
      overflow-y: scroll; /* 超出父盒子高度可滚动 */
    }
    
    .btn_ok {
      padding: 10px;
      font: 20px "microsoft yahei";
      text-align: center;
      border-top: 1.5px solid #E8E8EA;
      color: #3CC51F;
    }
    
    .drawer_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background: black;
      opacity: 0.5;
      overflow: hidden;
    }

OK,模拟弹窗也实现了。

2.2.7 预览图片

微信小程序入门(保姆级)_第19张图片

最后一步就是在第一个页面实现图片预览和图片保存的功能,在index.wxml 中为图片添加一个点击事件 previewlmage。

    <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg' bindtap='previewImage'></image>

在index.js 中添加 imgalist 项(我们直接把公众号的二维码图片上传到CSDN的图片服务器了),并且实现previewlmage 事件处理。如下:

    Page({
      data: {
        motto: 'Hello World',
        company: "wdbolg",
        lesson: "我的博客",
        position: "垃圾魔法师",
        imgalist: ['https://img-blog.csdnimg.cn/20190109104518898.jpg'],
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      previewImage: function (e) {
        wx.previewImage({
          current: this.data.imgalist,  // 当前显示图片的http链接
          urls: this.data.imgalist      // 需要预览的图片http链接列表
        })
      },

2.3 完成测试

大功告成,点击开发者工具中的“预览”,使用微信扫描生成的二维码即可在手机端查看。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号