微信小程序开发五（与springboot整合）

twx952024-04-20 9:24

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

实现一个小功能：

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

后端：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>

得到结果：