微信小程序开发

最新推荐文章于 2023-09-07 10:57:23 发布

开心是星星

最新推荐文章于 2023-09-07 10:57:23 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/weixin_49562132/article/details/117466414

版权

视频资料参考：https://www.bilibili.com/video/BV1af4y1U79T?p=1

1、准备工作

1、下载微信开发者网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、进入小程序，注册为开发者，获得appid：https://mp.weixin.qq.com/

3、下载node.js

看之前的vue笔记

http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下

确认nodejs安装成功:

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

2、创建新项目

vue init mpvue/mpvue-quickstart more_x_front

>npm install

>npm run dev

3、微信开发者工具导入项目

导入先前创建的项目。

打开

4、创建后台项目

（1）more_x_front

idea打开more_x_front,执行：> npm install node-sass sass-loader

重新运行编译：> npm run dev

出现报错，需要修改版本号，另外在style中加上scss

重新下载：> npm install

重新编译：> npm run dev

设置login.vue界面

<template>
  <div>
    <p>login11</p>
    <div>cccccc</div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="scss">

</style>

index.vue界面

<template>
  <div>
    <p>123</p>
    <login></login>
  </div>
</template>

<script>
import login from "../../components/login";
export default {
  components:{
    login
  },
  data() {
    return {
    }
  },
}
</script>

<style scoped lang="scss">

</style>

（2）more_x_back

idea创建more_x_back新项目，选择web模板。

5、实现用户登陆

（1）授权登陆按钮

需要设置open-type的值

@getuserinfo

<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="getUserInfo" >授权登录</button>
  </div>
</template>

<script>
  export default {
    methods:{
      getUserInfo(e){
        console.log(e)
      }
    }
  }
</script>

<style lang="scss">

</style>

获取到信息

小程序登陆

实现第一步

<script>
  export default {
    methods:{
      getUserInfo(e){
        console.log(e.target.userInfo)
        wx.login({
          success (res) {
            console.log(res)
            // if (res.code) {
            //   //发起网络请求
            //   wx.request({
            //     url: 'https://localhost:8501',
            //     data: {
            //       code: res.code
            //     }
            //   })
            // } else {
            //   console.log('登录失败！' + res.errMsg)
            // }
          }
        })
      }
    }
  }
</script>

获取到的信息：

（2）用户登陆后端部分

新建一个config.js

const server="http://localhost:8510"

const config={
  server,
  loginUrl: server+'/api/login'

}
export default config

<script>
  import config from "../config";
  export default {
    methods:{
      getUserInfo(e){
        console.log(e.target.userInfo);//获取登陆用户信息
        const loginUrl=config.loginUrl;
        // console.log(loginUrl)
        wx.login({
          success (res) {
            console.log(res);
            if (res.code) {
              //发起网络请求
              wx.request({
                url: loginUrl,
                // url: 'https://localhost:8510', //此处url用于连接后端
                data: {
                  code: res.code
                }
              })
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
      }
    }
  }
</script>

more_x_back

LoginController

@RestController
public class LoginController {
    @GetMapping("/api/login")
    public CustomResult Login(String code){
        System.out.println(code);
        return new CustomResult("ok");
    }
}

CustomResult

@Data
public class CustomResult {

    private String msg;

    public CustomResult(String msg) {
        this.msg = msg;
    }
}

application.yml

server.port=8510

点击前端授权登陆可能出现的错误

进行设置

解决，成功，more_x_back成功打印输出

获取session_key和openid

加入pom包

<!--client-->
        <dependency>
            <groupId>com.dtflys.forest</groupId>
            <artifactId>forest-spring-boot-starter</artifactId>
            <version>1.5.0</version>
        </dependency>

yml配置

forest:
  max-connections: 1000 # 连接池最大连接数，默认值为500
  max-route-connections: 500 # 每个路由的最大连接数，默认值为500
  timeout: 8000 # 请求超时时间，单位为毫秒, 默认值为3000
  connect-timeout: 8000 # 连接超时时间，单位为毫秒, 默认值为2000
  retry-count: 3 # 请求失败后重试次数，默认为0次不重试
  logEnabled: true # 打开或关闭日志，默认为true

在启动类上加入注解

@ForestScan(basePackages = "cn.study.more_x_back.client")

配置接口

public interface MyClient {

    @Get("${getTokenUrl}")
    String getToken(@Var("getTokenUrl") String getTokenUrl);

}

修改LoginController

@Autowired
    private MyClient myClient;

    @GetMapping("/api/login")
    public CustomResult Login(String code){
        //GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
        //System.out.println(code);
        String getTokenUrl=Url+"&js_code="+code+"&grant_type=authorization_code";
        //System.out.println("getTokenUrl:"+getTokenUrl);
        String token = myClient.getToken(getTokenUrl);
        System.out.println("token:"+token);

        return new CustomResult("ok");
    }

重启，点击授权登陆按钮获得session_key和openid。

6、记录登录信息

<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="getUserInfo" >授权登录</button>
  </div>
</template>

<script>
  import config from "../config";
  export default {
    methods:{
      getUserInfo(e){
        var _this = this
        let currentUser=e.target.userInfo;
        const loginUrl=config.loginUrl;

        wx.login({
          success (res) {//拿到用户登录授权信息的success

            if (res.code) {
              //发起网络请求
              wx.request({
                url: loginUrl,
                data: {
                  code: res.code
                },
                success(loginRes){//拿到用户openid的success
                  currentUser['openId']=(JSON.parse(loginRes.data.msg))['openid'];
                  //debugger   //可以进行debug测试
                  console.log(currentUser);
                  wx.setStorage({
                    key:"userinfo",
                    data:currentUser
                  });
                  //在子组件中需要向父组件传值处使用this.$emit
                  _this.$emit('loginsuccess');
                }
              })
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
</style>

index.vue

<template>
  <div>
    <!-- 在父组件中子组件引用处添加函数
    v-on:function="function1"；
    //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
    @ 为 v-on  -->

    <div v-if="notLogin">
      <login @loginsuccess="loginSuccess"></login>
    </div>

  </div>
</template>

<script>
import login from "../../components/login";
export default {
  components:{
    login
  },
  data() {
    return {
      notLogin: true
    }
  },
  methods:{
    loginSuccess(){
      this.notLogin=false;
      console.log("登录成功")
    }
  }
}
</script>

<style scoped lang="scss">

</style>

点击登录按钮，控制台输出登录成功。

修改app.json

实现登录

index.vue

<template>
  <div>
    <!-- 在父组件中子组件引用处添加函数
    v-on:function="function1"；
    //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
    @ 为 v-on  -->

    <div v-if="notLogin">
      <login @loginsuccess="loginSuccess"></login>
    </div>
  </div>
</template>

<script>
import login from "../../components/login";
export default {
  components:{
    login
  },
  data() {
    return {
      notLogin: true
    }
  },
  mounted(){
    if(wx.getStorageSync('userinfo')){
      this.notLogin=false;
      console.log(wx.getStorageSync('userinfo'))
    }else{
      wx.hideTabBar();
    }
  },
  methods:{
    loginSuccess(){
      this.notLogin=false;
      console.log("登录成功");
      wx.showTabBar();
        //实现登录成功弹框
      wx.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1000
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>

7、用户登录中心页面

user_center------->index.vue

<template>
  <div>
    <img :src="currentUser.avatarUrl" alt="">
  </div>
</template>

<script>
  export default {
    data(){
      return{
        currentUser : {
          avatarUrl : ''
        }
      }
    },
    mounted(){
      if(wx.getStorageSync('userinfo')){
        console.log("进入用户中心");
        this.currentUser = wx.getStorageSync('userinfo');
        //console.log(wx.getStorageSync('userinfo'))
      }else{
        console.log("异常登录进入");
      }
    }

  }
</script>

<style lang="scss">

</style>

成功展示

8、用户退出

pages--user_center--index.vue

methods: {
      logout() {
        wx.removeStorage({
          key: 'userinfo',
          success() {
            wx.hideTabBar();

            wx.showToast({
              title: '退出成功',
              icon: 'success',
              duration: 1000
            });

            wx.reLaunch({
              url: '/pages/index/main?logout=true'
            })
          }
        })
      }
    }

pages--index--index.vue

  //用户退出
  onLoad(option){
    if(option.logout === 'true'){
      this.notLogin = true
    }
  },

9、设置tab标签

app.json中修改图标

10、主页账目设置

account.vue

<template>
  <div>
    <div class="item">
      <div v-for="(item,index) in processedItems" :key="index" class="item-details">
        <div class="item-details-left">
          <div class="item-details-category">
            <!--只显示一个文字-->
            <span>{{item.category}}</span>
          </div>
        </div>
        <div class="item-details-middle">
          <div class="details-top">
            <div class="item-details-subcategory">
                <span>
                  {{item.subCatfory}}
                </span>
            </div>
            <div class="item-details-pay">
             <span :class="'pay-by-'+item.payEn">
                {{item.payCn}}
              </span>
            </div>
          </div>
          <div class="details-bottom">
            <div class="item-details-desc">
              <span>
                {{item.desc}}
              </span>
            </div>
          </div>
        </div>
        <div class="item-details-right">
          <div class="item-details-value">
            <span :class="item.type===0?'out':'in'">{{item.value}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentUser: {},
        items: [
          {
            id: 1,
            type: 0,
            category: '食物',
            subCatfory: '零食',
            desc: '今天肚子饿了',
            value: 50,
            date: '2020/5/13',
            pay: 'wechat',
            user: 'openid'
          },
          {
            id: 2,
            type: 1,
            category: '工资',
            subCatfory: '业务分红',
            desc: 'xxx',
            value: 500,
            date: '2020/5/13',
            pay: 'bankCard',
            user: 'openid'
          }
        ],
        processedItems: []

      }
    },
    mounted() {
      this.processItemInfo()
    },

    methods: {
      processItemInfo () {
        this.processedItems = []
        for(let i=0; i<this.items.length;i++){
          let newItem = {}
          for(let attr in this.items[i]){
            if(attr === 'pay'){
              newItem['payEn'] = this.items[i].pay
              newItem['payCn'] = this.getPayName(this.items[i].pay)
            }
            else if (attr === 'category') {
              newItem[attr] = this.items[i].category.substring(0,1)
            }
            else {
              newItem[attr] = this.items[i][attr]
            }
          }
          newItem.opacity = 1
          newItem.width = 100
          this.processedItems.push(newItem)
        }
      },
      getPayName(pay){
        switch (pay) {
          case 'wechat':
            return '微信';
          case 'bankCard':
            return '银行卡';
          case 'alipay':
            return '支付宝';
          default:
            return '其他';
        }
      }
    }

  }
</script>

<style lang="scss">
  .account-area {
    position: absolute;
    top: 14vh;
    height: 85vh;
    padding-top: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.7);
  }
  .item {
    width: 90%;
    margin: auto;
    .item-details{
      box-shadow:0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11);
      border-radius: 4px;
      color: #322f3b;
      font-weight: lighter;
      margin: auto auto 5px;
      display: flex;
      flex-direction: row;
      height: 80px;
      transition: width 0.2s;
      .item-details-left {
        width: 15%;
        display: flex;
        flex-direction: row;
        .item-details-category{
          height: 40px;
          width: 40px;
          display: flex;
          flex-direction: column;
          align-self: center;
          background-color: #322f3b;
          font-size: 20px;
          color: #e2e1e4;
          font-weight: bolder;
          border-radius: 99px;
          margin-left: 5px;
          span {
            line-height: 40px;
            text-align: center;
          }
        }
      }
      .item-details-middle{
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .details-top{
          height: 30px;
          display: flex;
          flex-direction: row;
          .item-details-subcategory{
            margin-left: 15px;
            padding-top: 10px;
            display: flex;
            flex-direction: column;
            span {
              background-color: #322f3b;
              color: #e2e1e4;
              text-align: center;
              border-radius: 4px;
              font-size: 12px;
              padding: 2px;
              font-weight: bolder;
            }
          }
          .item-details-pay{
            margin-left: 15px;
            padding-top: 10px;
            display: flex;
            flex-direction: column;
            span {
              color: #e2e1e4;
              text-align: center;
              border-radius: 4px;
              font-size: 12px;
              padding: 2px;
              font-weight: bolder;
            }
          }
        }
        .details-bottom{
          height: 50px;
          display: flex;
          flex-direction: row;
          .item-details-desc {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            align-self: center;
            border: 1px dashed #e2e1e4;
            border-radius: 10px;
            padding: 3px;
            width: 100%;
            span {
              text-align: center;
              font-size: 12px;
            }
          }
        }
      }
      .item-details-right {
        margin-left:auto;
        margin-right: 10px;
        display: flex;
        flex-direction: row;
        .item-details-value {
          display: flex;
          flex-direction: column;
          align-self: center;
          height: 80px;
          span {
            line-height: 80px;
            font-size: 30px;
          }
        }
      }
    }
  }

  .in {
    color: crimson;
  }
  .out {
    color: green;
  }
  .pay-by-wechat {
    background-color: limegreen;
  }
  .pay-by-bankCard {
    background-color: midnightblue;
  }
  .pay-by-alipay {
    background-color: dodgerblue;
  }
  .pay-by-default {
    background-color: #322f3b;
  }
  .pay-by-ICBC {
    background-color: #c7000b;
  }
  .pay-by-ABC {
    background-color: #37b7a5;
  }
</style>

实现成果：

开心是星星

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发

一、准备工作1、下载微信开发者网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2、进入小程序，注册为开发者，获得appid：https://mp.weixin.qq.com/3、下载node.js...
复制链接

扫一扫