微信小程序（奶爸级教程）

最新推荐文章于 2025-05-14 16:48:00 发布

JavaJedi李

最新推荐文章于 2025-05-14 16:48:00 发布

阅读量762

点赞数 22

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_67417798/article/details/139197303

版权

一、小程序账号注册

1.登录官网进行注册：微信公众平台 (qq.com)

点击立即注册

点击小程序

前往注册

然后填写邮箱密码这些信息，然后注册

注册成功后，登录进去，找到开发管理，然后找到小程序ID

二、下载微信开发者工具

下载微信开发者工具网址：下载 / 稳定版更新日志 (qq.com)

找到稳定版下载，直接无脑式下载就可以了，其中就是有个安装地址自己更改

三、创建项目

下载完成后打开，会出现一个二维码，拿微信扫码登录就可以了

1.创建项目

项目目录介绍

pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
.eslintrc.js 检测代码样式格式的文件
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
project.private.config.json 项目私有配置文件
sitemap.json 用来配置小程序以及页面是否允许被微信索引

在所创建文件夹右击新建page文件，会出现以下四个文件

.js是写JS代码的，.wxml是写微信小程序代码，.wxcss是用来写css样式

四、使用后端接口实现简单查询

wxml代码

<!--pages/tounidie/nima.wxml-->
<view class="vvv">
  <view class="view1">
    <text>ID</text>
    <text>用户名</text>
    <text>密码</text>
    <text>手机号</text>
    <text>地址</text>
    <text>余额</text>
  </view>
    <view class="view2" wx:for="{{userData}}" wx:key="id">
      <text>{{item.id}}</text>
      <text>{{item.username}}</text>
      <text>{{item.password}}</text>
      <text>{{item.phone}}</text>
      <text>{{item.address}}</text>
      <text>{{item.money}}</text>
    </view>
  
</view>

JS代码

// pages/tounidie/nima.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     userData:[],
  },
 selectUser(){
   var that = this;
   wx.request({
     url: 'http://localhost:8080/user/selectUser',
     method:"GET",
     success(res){
        console.log(res.data);
         that.setData({
          userData:res.data
        });
     },
   });
 },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.selectUser();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

css样式代码

/* pages/tounidie/nima.wxss */
.vvv {
  width: 97%;
  margin-left: 10rpx;
}

.view1 {
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: space-between;
}

.view2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  word-wrap: break-word;
}
.view2>text{  
  width: 100rpx;
  margin-left: 10rpx;
  margin-top: 10rpx;
  text-align: left;
}