微信小程序开发五(与springboot整合)

首先在微信开发者工具中开启不校验合法域名,这个才能本地访问

实现一个小功能:

展示数据信息,每条数据的颜色不一样

后端:springboot+mybatisplus+mysql

依赖:

XML 复制代码
<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>

数据库表信息:

XML 复制代码
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '唯一标识',
  `nickname` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '用户名称',
  `color` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('843232', '李哪吒', '#FF44AA');
INSERT INTO `user` VALUES ('994343', '杨戬', '#A20055');
INSERT INTO `user` VALUES ('894394', '张三', '#CC6600');
INSERT INTO `user` VALUES ('323232', '李四', '#BBBB00');
INSERT INTO `user` VALUES ('3325233', '王五', '#008800');

SET FOREIGN_KEY_CHECKS = 1;

实体类:

XML 复制代码
@Data
@TableName("user")
public class UserColor {
    private String nickname;
    private String color;
}

mapper层、service层和service实现类就不写了

controller层:

XML 复制代码
@RestController
@RequestMapping("/wx")
public class WxController {

    @Autowired
    private UserService userService;

    @GetMapping("/color")
    public List color(){
        List<UserColor> list = this.userService.list();
        return list;
    }
}

微信小程序代码:

js文件找到onLoad(options) 方法:

XML 复制代码
 wx.request({
         url: 'http://localhost:8089/wx/color',
         method:"get",
         success:(res)=>{
             this.setData({
               msg:res.data
             });
         }
       })

wxml文件:

XML 复制代码
<view style="color:{{user.color}}" wx:for="{{msg}}" wx:key="ids" wx:for-item="user" wx:for-index="ids">{{user.nickname}}</view>

得到结果:

相关推荐
The_era_achievs_hero1 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩9 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉9 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code10 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤12 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀19 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922441 天前
租车小程序电动车租赁小程序php方案
小程序