uni-app进行微信小程序开发,快速上手

准备工作

  • IDE

++https://www.dcloud.io/hbuilderx.html++

  • 微信小程序开发工具

下载 / 稳定版更新日志 (qq.com)

  • 安装流程

  • 打开HBuilderX 点击这个logo打开终端 然后 下载一下终端插件

初始化一个demo

  • 通过vue-cli命令行创建项目

uni-app官网 (dcloud.net.cn) (官方文档)

  • 可视化方式创建

uni-app官网 (dcloud.net.cn) (官方文档)

  • 或者下载一个项目模板

下载仓库 http://DCloud/uni-preset-vue - Gitee.com

我在这里使用了命令行方式创建一个空项目

  • 全局安装 vue-cli(脚手架)

  • 创建uni-appnpx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

项目目录结构

  • 运行的配置

OK了!!!

demo能够跑起来直接精通了

开始 "实战"

完整前端代码

zql-uniapp · 企业级代码管理平台 (aliyun.com)

目标

主要目标

  • 菜单实现

  • 页面跳转实现(携带参数和不带参数)

  • 登录拿到username和微信头像

  • openId存到pinia

菜单实现

  • 新建页面

新建四个页面之后检查一下再pages.json中是否都注册成功

没有的话 手动写一下

  • 使用tabBar组件创建菜单

通义tongyi.ai_你的全能A

I助手.html(5.2 MB)

  • 0%
java 复制代码
{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path" : "views/index",
            "style" : 
            {
                "navigationBarTitleText" : ""
            }
        },
        {
            "path" : "pages/login/login",
            "style" : 
            {
                "navigationBarTitleText" : "我的"
            }
        },
        {
            "path" : "pages/about/about",
            "style" : 
            {
                "navigationBarTitleText" : "关羽"
            }
        },

        {
            "path" : "pages/log/log",
            "style" : 
            {
                "navigationBarTitleText" : "log"
            }
        }
    ],


    "tabBar": {
        "backgroundColor": "248,248,248",
        "color": "#000000",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/xinxi.png",
                "selectedIconPath": "static/xinxifill.png"

            },
            {
                "pagePath": "pages/about/about",
                "text": "收藏",
                "iconPath": "static/shoucang.png",
                "selectedIconPath": "static/shoucangfill.png"

            },
            {
                "pagePath": "pages/login/login",
                "text": "我的",
                "iconPath": "static/jingli.png",
                "selectedIconPath": "static/jinglifill.png"
            }


        ]
    },



    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}
  • 不相关资源

iconfont-阿里巴巴矢量图标库

页面跳转

  • 一个是跳转的组件

navigator | uni-app官网 (dcloud.net.cn)

XML 复制代码
<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
  • 一个是 navigateTo方法
javascript 复制代码
uni.navigateTo({
              url: `/pages/log/log?msg=${(inputValue.value)}`,
              fail: (err) => {
                  console.log(err)
                }
            });

navigateTo的Api

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.net.cn)

  • 携带参数跳转``url: `/pages/log/log?msg=${(inputValue.value)}```

  • 目标页面接受参数

javascript 复制代码
onLoad((options) => {      
	console.log(options.msg);      
	msg.value = options.msg;  
});
  • 跳转tabBar页面
javascript 复制代码
const switchTabTo = () => {
		
		uni.switchTab({
			url: '/pages/login/login', //必须在pages.json的tabBar组件注册
			fail: (err) => {
				console.log(err)
			}
		});
	}

index.vue

javascript 复制代码
<template>
    <view class="text-area">
        <input class="custom-input" type="text" v-model="inputValue" placeholder="请在此输入" />
        <view class="button-container">
            <!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> -->
            <button type="primary" @click="navigaToLog">方法跳转</button>
        </view>


        <view c">
            <!-- <button type="warn"> -->
                <navigator :url="`/pages/log/log?msg=${(inputValue)}`">组件跳转</navigator>
            <!-- </button> -->
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { onMounted, ref } from 'vue';



    const inputValue = ref('');

    onMounted(() => {
    })



    const navigaToLog = () => {
        console.log(inputValue.value);
        uni.navigateTo({
            //'/pages/log/log?msg='+inputValue.value
            url: `/pages/log/log?msg=${(inputValue.value)}`,
            fail: (err) => {
                console.log(err)
            }
        });
    }
</script>

log.vue

java 复制代码
<template>
    <view class=".text-area">
        <text>log界面接收:{{ msg }}</text>
    </view>
    <view class="button-container">
        <!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> -->
        <button type="warn" @click="navigaToLogin">去登录1</button>
    </view>
    <view class="button-container">
        <!-- <button @click="switchTabtiaozhuan">switchTab跳转到关于页面</button> -->
        <button type="primary" @click="switchTabTo">去登录2</button>
    </view>

</template>

<script setup>
    import {
        onLoad
    } from '@dcloudio/uni-app';
    import {
        ref
    } from 'vue';
    // const modelValue = defineModel("modelValue");
    const msg = ref("");


    onLoad((options) => {
        console.log(options.msg);
        msg.value = options.msg;
    });


    const navigaToLogin = () => {

        uni.navigateTo({
            url: '/pages/login/login',
            fail: (err) => {
                console.log(err)
            }
        });
    }

    const switchTabTo = () => {

        uni.switchTab({
            url: '/pages/login/login',
            fail: (err) => {
                console.log(err)
            }
        });
    }


</script>

使用pinia

关于uni-app内置pinia的问题

https://ask.dcloud.net.cn/question/194066

安装不了pinia的试试

报错信息

  1. 升级vue npm install vue@3.4.31npm install pinia

  2. 降级pinianpm install pinia@2.0.35执行以下命令看看所有pinia 版本挑着试试npm view pinia versions

  • 导入pinia
  • 创建store 在src下新建index.ts
javascript 复制代码
import { createPinia, defineStore } from 'pinia';
const pinia =createPinia();


export const useCounterStore = defineStore('storeWX', {
    state: () => {
        return {
            openId: "",
            nickName: "尚未登录",
        };
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })

});

再回到main.ts

使用pinia

登录

准备工作

https://mp.weixin.qq.com/

自己注册一个小程序登录的Api

uni.login(OBJECT) | uni-app官网 (dcloud.net.cn)

可以写代码了

login.vue

java 复制代码
<template>
    <view>
        <view>
            <text style="font-size: 19px;" >用户昵称:{{storeWX.nickName}}</text>


            <image :src="url" style=" width:200px; height: 200px; background-image: url(../../static/jingli.png);">
            </image>

        </view>


        <button type="primary" @click="wechatLogin">微信登录</button>
    </view>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useCounterStore } from '../../store/index';

    const nickName = ref("");

    const storeWX = useCounterStore();

    const url = ref("");

    const wechatLogin = () => {
        uni.login({
            "provider": "weixin",
            "onlyAuthorize": true, // 微信登录仅请求授权认证
            success: function (event) {
                const { code } = event
                //客户端成功获取授权临时票据(code),向业务服务器发起登录请求。
                uni.request({
                    url: 'http://localhost:8080/api/wechat/openid', //仅为示例,并非真实接口地址。
                    data: {
                        code: code
                    },
                    success: (res) => {
                        //获得token完成登录
                        console.log(res.data);
                        storeWX.openId=res.data.openid;
                        console.log(storeWX.openId);

                        // uni.setStorageSync('token',res.token)
                        uni.getUserInfo({
                            provider: 'weixin',
                            success: function (infoRes) {
                                nickName.value = infoRes.userInfo.nickName;
                                url.value = infoRes.userInfo.avatarUrl;
                                storeWX.nickName=infoRes.userInfo.nickName;
                                // storeWx.avatarUrl=infoRes.userInfo.avatarUrl,
                                console.log(infoRes)
                            }
                        });
                    }
                });
            },
            fail: function (err) {
                // 登录授权失败
                // err.code是错误码
            }
        })
    }
</script>
java 复制代码
@RestController
@RequestMapping("/api/wechat")
public class WeChatController {

    private final  String appid ="你的appid";
    private final  String secret ="你的秘钥";
    @GetMapping("/openid")
    public JSONObject getOpenId(@RequestParam String code){

        String url="https://api.weixin.qq.com/sns/jscode2session?appid="
                +appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code";

        String s = HttpUtil.get(url);
        JSONObject entries = JSONUtil.parseObj(s);
        return entries;
    }
}
相关推荐
井眼31 分钟前
微信小程序-prettier 格式化
微信小程序·小程序
qq_17448285753 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502773 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
西凉河的葛三叔6 小时前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu6 小时前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
licy__9 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_99225027718 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji1 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生1 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入2 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪