简单入门小程序 01

最新推荐文章于 2025-07-14 16:05:04 发布

原创最新推荐文章于 2025-07-14 16:05:04 发布 · 1.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#web开发 #javascript #css #小程序 #微信

小程序专栏收录该内容

3 篇文章

订阅专栏

首先，入门小程序你应该具备的知识和能力有：

html ,CSS ,和基础的 javascript 知识
看过小程序的官方文档
了解生命周期

点击这里进入小程序官方文档阅读
点击这里下载微信 web 开发者工具并安装

1.注册属于自己的小程序及基本配置

前往微信公众平台注册自己的小程序账号并登录

点击设置，点击开发设置，获取小程序的appId.
打开微信 web 开发者工具
在桌面新建一个文件夹 Demo
点击新建小程序

输入你自己的 AppID，项目名称，项目目录选择刚才建立的 Demo 文件夹，勾选创建 QuickStart 项目，点击确定。

出现这个页面，点击编译即可。

在 demo 文件夹中新建一个images文件夹，用于存放我们需要用的的图片。
点击这里打开阿里图标库，下载所需的图标
你也可以前往我的github下载相关图片
图标命名和颜色如下图所示：

现在打开 app.json 文件，里面代码如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

我们将其代码修改为：

{
  "pages": [
    "pages/index/index",
    "pages/pay/pay",
    "pages/me/me",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#707070",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/chazuo1.png",
        "iconPath": "images/chazuo.png",
        "pagePath": "pages/index/index",
        "text": "插座"
      },
      {
        "selectedIconPath": "images/me1.png",
        "iconPath": "images/me.png",
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
  }
}

ctrl+s 保存，效果如下：

现在解读一下app.json里面代码所代表的意思，当然如果不全面你也可以查看官方文档。

pages //定义小程序的页面，在这里写相对应的页面，它会在Pages文件夹自动生成四个文件，wxml,wxss,json,js四种格式的文件。
tabBar  // 底部导航栏
"color": "#707070", // 默认文字颜色
"selectedColor": "#1296db",  // 激活颜色，与我们下载的图标颜色一样效果最好
"borderStyle": "white",  // border颜色
list  // 导航的内容，里面有几个对象导航栏就有几栏，但不超过5栏
selectedIconPath // 激活时的图标路径
iconPath // 未激活时图标路径
pagePath// 页面路径
text // 文本

2.index页面的实现

接下来我们将pages/index/index.wxml 里面的内容清空 index.wxss也清空
因为本文是着重降解小程序是如何实现的，因此CSS即wxss的内容不做介绍
修改index.wxss代码如下：

/**index.wxss**/

.top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20rpx 0;
  align-items: center;
}

.title {
  padding: 10rpx;
  margin-left: 20rpx;
  border-right: 4px solid #ccc;
  font-weight: bold;
}

.refresh {
  margin-right: 30rpx;
  background-color: #00e3e3;
  color: #fff;
  border-radius: 10px;
  padding: 10rpx 20rpx;
  box-shadow: 0 2px 7px rgba(0,0,0,.25);
}
.detail{
  width: 600rpx;
  padding: 20rpx;
  margin: 20rpx auto;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
}
.img{
  width: 100rpx;
  height: 100rpx;
}

.desc{
  font-size: 30rpx;
  color:#666;
  line-height: 50rpx;
  margin: 0 20rpx;
}

.active{
  animation: mymove 3s linear infinite;
}

@keyframes mymove
{
from {transform:rotate(0deg)}
to {transform:rotate(360deg)}
}

.use{
  color:#666;
  font-size: 30rpx;
  padding: 20rpx;
  border-radius: 20%;
  border: 1px solid #ccc;
}

在index文件夹中新建一个index.json文件，代码如下：

{
  "navigationBarTitleText": "附近插座"
}

这样小程序顶部的标题就变成了‘附近插座’
在编辑index.wxml之前，我们先在app.js中globalData: {userInfo: null} 修改为：

 globalData: {
    use1: false,
    use2: true
  }

其中use1定义为插座1，false为未被使用，use2定义为插座2，true表示正被使用中
接下来修改index.wxml中的代码，注意ctrl+s保存代码

<!--index.wxml-->
<view class='top'>
  <view class='title'>附近插座</view>
  <view class='refresh'>刷新</view>
</view>
<view class='detail' bindtap='pay1'>
  <view class='imgDiv'>
    <image class='img' src='/images/chazuo2.png' wx:if="{{!use1}}"></image>
    <image class='img active' src='/images/chazuo3.png' wx:else></image>
  </view>
  <view class='desc'>
    <view>1号插座</view>
    <view>插座编号：00000000001</view>
    <view>收费模式：<text style='color:red'>按电量收费</text></view>
    <view wx:if="{{!use1}}">插座状态：<text style='color:#1afa29'>空闲中</text></view>
    <view wx:if="{{use1}}">插座状态：<text style='color:red'>使用中</text></view>
    <view></view>
    <view></view>    
  </view>
  <view class='use' wx:if="{{!use1}}" catchtap="use1">使用</view>
</view>
<view class='detail' bindtap='pay2'>
  <view class='imgDiv'>
    <image class='img' src='/images/chazuo2.png' wx:if="{{!use2}}"></image>
    <image class='img active' src='/images/chazuo3.png' wx:else></image>
  </view>
  <view class='desc'>
    <view>2号插座</view>
    <view>插座编号：00000000002</view>
    <view>收费模式：<text style='color:red'>按电量收费</text></view>
    <view wx:if="{{!use2}}">插座状态：<text style='color:#1afa29'>空闲中</text></view>
    <view wx:if="{{use2}}">插座状态：<text style='color:red'>使用中</text></view>
    <view></view>
    <view></view>    
  </view>
  <view class='use' wx:if="{{!use2}}" catchtap="use2">使用</view>
</view>

这是当前页面的效果，因为JS文件我们还没写
wx:if="{{!use1}}" 为小程序中的条件渲染，当！use1（index.js文件中data定义的use1）为true时，该view(即div)显示，否则含有wx:else 的view 显示。bindtap='pay1' 为该view绑定事件pay1
index.js代码如下：

//index.js
//获取应用实例
const app = getApp()

Page({
  // 定义数据
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
  },
  //点击1号插座使用触发的事件
  use1() {
    // 设置本页面的data的use1数据，只有this.setData()后页面才发生渲染
    this.setData({
      use1: !this.data.use1
    })
    // 弹出消息框
    wx.showToast({
      title: '使用成功',
      duration: 2000
    })
    // app.globalData为全局数据，定义全局的use1，方便去到其他页面引用
    app.globalData.use1 = !app.globalData.use1
  },
  //点击2号插座使用触发的事件
  use2() {
    //定义全局的use2，方便去到其他页面引用
    app.globalData.use2 = !app.globalData.use2
     // 设置本页面的data的use2数据，只有this.setData()后页面才发生渲染
    this.setData({
      use2: !this.data.use2
    })
    // 弹出消息框
    wx.showToast({
      title: '使用成功',
      duration: 2000
    })
  },
  // 点击插座1前往支付页面
  pay1() {
    // 如果use1位false,则表示处于空闲中，返回不支付
    if (!this.data.use1) return
    // 前往支付页面，携带参数为use=1
    wx.navigateTo({
      url: '/pages/pay/pay?use=1'
    })
  },
  // 点击插座2前往支付页面
  pay2() {
    // 如果use2位false,则表示处于空闲中，返回不支付
    if (!this.data.use2) return
    // 前往支付页面，携带参数为use=2
    wx.navigateTo({
      url: '/pages/pay/pay?use=2'
    })
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
  },
  onShow: function () {
    // 从全局的data中获取use1,use2并设置，注意必须在顶部 const app = getApp()
    this.setData({
      use1: app.globalData.use1,
      use2: app.globalData.use2
    })
  }
})