微信小程序开发五(与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>

得到结果:

相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所4 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck4 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场6 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld6 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json6 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球8 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域10 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域13 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero20 小时前
微信小程序71~80
微信小程序·小程序