微信小程序
使用uniapp开发
uniapp官网：
https://uniapp.dcloud.net.cn/
创建项目
创建完成，node -v查看版本，切到16.+的版本
下载依赖
npm install
启动项目，在package.json中查看
npm run dev:mp-weixin
下载 微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
打开微信小程序，导入dist\dev\mp-weixin
在pages.json中配置路由以及tabBar，在pages中新建页面文件夹以及tabBar的图标static–tabBar
pages.json：
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/shop/shop",
"style": {
"navigationBarTitleText": "商城"
}
},
{
"path": "pages/mine/mine",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#BDBDBD",
"selectedColor": "#000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"iconWidth": "16px",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/tabBar/icon-community-grey.png",
"selectedIconPath": "static/tabBar/icon-community-black.png",
"text": "首页"
},
{
"pagePath": "pages/shop/shop",
"iconPath": "static/tabBar/icon-shopping-grey.png",
"selectedIconPath": "static/tabBar/icon-shopping-black.png",
"text": "商城"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "static/tabBar/icon-car-grey.png",
"selectedIconPath": "static/tabBar/icon-car-black.png",
"text": "我的"
}
]
}
}
上线
微信公众平台
引入scss
安装scss
npm install sass --save-dev
npm install sass-loader --save-dev
在vue.config.js文件中配置
在src文件夹下新建assets文件夹–>style文件夹–>global.scss文件，然后在vue.config.js文件中配置。
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
],
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "./src/assets/style/global.scss";'
}
}
}
})
直接在页面中使用即可
<style lang="scss">
.home {
display: flex;
flex-direction: column;
.home-top{
color: red;
}
}
</style>
页面使用
home文件夹中新建home.vue文件，home.js文件，home.scss文件
home.vue文件写模板：
<template>
<view class="home">
<view class="home-top">home页面</view>
</view>
</template>
<script>
import home from "./home.js"
export default home;
</script>
<style lang="scss">
@import "./home.scss";
</style>
home.js文件写js文件:
export default {
data() {
return {
name: "home",
};
},
methods: {
},
onLoad() {},
};
home.scss文件写样式：
.home {
display: flex;
flex-direction: column;
.home-top {
color: green;
}
}
页面跳转
uniapp文档中页面路由
https://zh.uniapp.dcloud.io/api/router.html#navigateto
home页面：
参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
methods: {
toDetail() {
console.log("跳转到详情页面");
uni.navigateTo({
url: "/pages/home/src/homeDetail/homeDetail?name=" + this.info.name + "&key=1"
})
}
},
homeDetail页面接收参数：
onLoad声明周期中默认参数options，可拿到所有传过来的参数
<script>
export default {
data() {
return {
name: "homeDetail",
};
},
methods: {
},
onLoad(options) {
console.log(options); // {name: "夏洛克克洛伊", key: "1"}
},
};
</script>
跳转方式
1. uni.navigateTo(OBJECT) ：
uni.navigateTo({
url: "/pages/home/src/homeDetail/homeDetail?name=" + this.info.name + "&key=1"
})
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
back(){
uni.navigateBack()
},
2. uni.redirectTo(OBJECT):
关闭当前页面，跳转到应用内的某个页面。
uni.redirectTo({
url: 'test?id=1'
});
3. uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
uni.reLaunch({
url: 'test?id=1'
});
4. uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
跳转到 tabBar 页面只能使用 switchTab 跳转
uni.switchTab({
url: '/pages/home/home'
});
5. uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。
uni.navigateBack({
delta: 2
});
使用uniapp扩展组件
uniapp官网中引用扩展组件：
https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
在vite.config.js文件中加入
module.exports = {
transpileDependencies:['@dcloudio/uni-ui']
}
即：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
],
css: {
preprocessorOptions: {
scss: {
additionalData:'@import "./src/assets/style/global.scss";'
}
}
},
// transpileDependencies:['@dcloudio/uni-ui']
})
使用的vue3+vite可省略
安装 sass 及 sass-loader
安装 uni-ui
npm i @dcloudio/uni-ui
pages.json中配置easycom
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
改完配置之后run以及build启动或者打包查看是否成功
使用扩展组件：比如使用扩展组件中的弹窗
<view class="mine-top-btn">
<button @click="toLogin">手机号快捷登录</button>
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
</view>
</uni-popup>
使用弹窗组件uni-popup，用ref定义标识，在js中使用this.$refs，然后调用.open方法可打开弹窗，参数是弹窗打开的位置。.close方法是关闭弹窗。
methods: {
toLogin() {
this.$refs.popup.open("center");
},
}
接口调用
uniapp官网中发送网络请求：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
文档示例参考用法,直接使用wx.request(Object object)微信内置的请求方式发送请求即可。
在src文件夹下新建api文件夹–>新建request.js文件，封装请求
export const request_get = (url, data) => {
wx.request({
url, //仅为示例，并非真实的接口地址
data,
header: {
'content-type': 'application/json' // 默认值,
},
method: 'GET',
success(res) {
console.log(res.data)
}
})
}
export const request_post = (url, data) => {
wx.request({
url, //仅为示例，并非真实的接口地址
data,
header: {
'content-type': 'application/json' // 默认值
},
method: 'POST',
success(res) {
console.log(res.data)
}
})
}
其他请求方式一样封装接口
在页面中使用：
import {request_get, request_post} from "@/api/request";
export default {
data() {
return {
name: "mine",
lists: list,
lists1: list1,
};
},
methods: {
toLogin() {
// get请求使用
request_get("http://www.baidu.com", { name:"111" })
// post请求使用
request_post("http://www.baidu.com", { name:"222" })
},
}
}
页面登录
用户一键登录
https://uniapp.dcloud.net.cn/component/button.html
button按钮中有属性@getphonenumber用来获取用户手机号回调,需要使用open-type=“getPhoneNumber” ，以及回调@getphonenumber=“getPhoneNumber”。可以调起获取手机号弹窗。
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
</view>
</uni-popup>
JS中找到getphonenumber的回调，可以拿到code，
然后通过uni.login()方法获取临时用户凭证，通过临时用户凭证向后端获取token
最后拿着code和token去后端换取真正的手机号
https://uniapp.dcloud.net.cn/api/plugins/login.html#login
// 获取手机号
getPhoneNumber(e){
console.log(e);
// 1. 通过获取手机号的回调可以获取到code，是加密过的，需要通过这个code调后端接口换取真正手机号
console.log(e.detail.code);
this.getLoginCode();
},
// 2. 需要通过login方法获取到临时用户登录凭证，然后通过用户登录凭证向后端获取到接口token
getLoginCode(){
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
console.log(loginRes)
console.log(loginRes.code);
// 3. 拿到临时用户登录凭证之后需要调用后端接口获取token
// 4. 拿到token之后以及上面的按钮获取到的code之后，调用后端接口去换取真正的手机号
}
});
}
可以看一下微信官方文档后端做的事情：
获取token
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
获取登录凭证的接口参数
grant_type就是通过login方法获取到的用户登录凭证。appid和secret是公司申请微信小程序的时候从微信公众平台直接拿到的。
可以拿到的token。
获取手机号
传的参数是属性access_token由临时凭证换取到的token。code由按钮获取手机号的回调拿到的code。openid公司申请时的openid。
返回的参数中可以拿到phone_info是所有用户的相关信息，从而可以拿到用户真正的手机号 phoneNumber。
拨打手机号
调用uinapp的api接口
https://uniapp.dcloud.net.cn/api/system/phone.html#makephonecall
uni.makePhoneCall({
phoneNumber: '400-999-999' //仅为示例
});
小程序的生命周期函数
onLoad: 页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。
onShow: 页面显示时触发调用。
onReady: 页面初次渲染完成时触发,一个页面只会调用一次。
onHide: 页面隐藏时触发，如navigateTo或底部tab切换到其他页面等。
onUnload: 页面卸载时触发。如redirectTo或navigateBack到其他页面时。
分包限制
分包主要包括：使用分包、独立分包、分包预下载
分包：主包添加跳转路径，分包放内容，在pages.json配置subpakeages声明项目分包结构。
微信小程序代码包总包大小为20M，单个主包/分包大小不能超过2M。
按照功能划分的打包原则：可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包；公共逻辑、组件放在主包内。
总结：首先配置好打包路径，tabbar页面必须在主包内，各分包之间不能互相调用，能调用的都在主包内。
在pages.json文件中：
{
"pages": [
"pages/home/home",
"pages/index/index"
],
"subpackages": [
{
"root": "pages/extra/",
"pages": [
"extra1/extra1",
"extra2/extra2"
]
}
]
}
例如上面home 和 index 在主包内，extra1 和 extra2 在 pages/extra/ 路径下的分包内。
这样，home 和 index 页面会被打包进主包，而 extra1 和 extra2 页面会被打包进 pages/extra/ 路径下的分包中。
注意：分包的路径是相对于小程序代码根目录的。每个分包的大小和个数都有限制。
扫一扫
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
