一个超级简单的微信小程序（前端+GO后端）

最新推荐文章于 2024-08-12 09:06:27 发布

weixin_44000353

最新推荐文章于 2024-08-12 09:06:27 发布

阅读量6.6k

点赞数 4

分类专栏：从0开始做应用文章标签：小程序 golang 前端

本文链接：https://blog.csdn.net/weixin_44000353/article/details/110351557

版权

从0开始做应用专栏收录该内容

1 篇文章

订阅专栏

写在前面

最近突然有需求要做一个小程序，奈何前端基本没学过，后台马马虎虎，而且有要求go语言开发后端，上网找了很多教程基本都是JAVA做后端的，本来想找一个那种最最简单的代码能够跑一下看看效果，结果没找到(太复杂的代码看不懂），索性借鉴了一点别人的代码自己做一个简单的demo吧，也为了如果有像我一样的菜鸡能够快速上手小程序。

一些配置

首先我们需要如下工具（本文重点讲代码部分，安装之类的可以看其他教程，都要非常详细的介绍）：

微信开发者工具（官网可下）
go语言及趁手的编译器
下载echo框架$ go get -u github.com/labstack/echo/...
去官网申请一个APPID
`

小程序前端

首先新建一个小程序项目，选择不使用云开发
由于没有服务器，需要在微信开发工具的详情下勾选“不校验合法域名……”
在这里插入图片描述
新建之后一些基本的配置是有的不需要管
在pages/index/index.js下写入代码：

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

Page({
   /**
   * 页面的初始数据
   */
  data: {
    list: '',
    word: '',
    message:''
  },
  houduanButton1: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:1323/getUser',
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//打印到控制台
        that.setData({
          list: res.data,
          //res代表success函数的事件对，data是收到的数据
        })
      }
    })
  }
})

主要就是通过request方法get一下来自服务器的数据，

注意url需要和后端端口一致。

然后在pages/index/index.wxml下写入：

<!--index.wxml-->
<button bindtap='houduanButton1'>点我</button>
<view wx:for="{{list}}">
    {{item}}
</view>

一个超超超超级简陋的前端就完成了，效果如下
在这里插入图片描述

只有一个按钮，点击请求数据

小程序后端

下面来写我们的后端，同样是秉承简单的原则

package main

import (
	"net/http"

	"github.com/labstack/echo/v4"
)

type User struct {
	Name  string `json:"name" xml:"name" form:"name" query:"name"`
	Email string `json:"eamil" xml:"email" form:"email" query:"email"`
}

func main() {
	e := echo.New()
	e.GET("/getUser", getUser)

	e.Logger.Fatal(e.Start(":1323"))
}

func getUser(c echo.Context) error {
	u := new(User)
	u.Name = "lll"
	u.Email = "111.com"
	return c.JSON(http.StatusOK, u)
}