前端学习—使用uni-app搭建微信小程序&基础知识

已于 2024-02-19 14:30:30 修改
阅读量402 收藏 5
点赞数 8
文章标签： 前端 学习 uni-app
于 2024-01-30 00:12:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sayatnoon/article/details/135902129
版权

卑微的后端人为了做毕设开始学前端了，老天保佑，祝愿我的毕设能顺利完成！
01-uni-app介绍_哔哩哔哩_bilibili

目录

一、脚手架搭建项目-使用powershell

（一）全局安装

（二）创建项目

（三）启动项目，编译至微信小程序平台

二、sass的使用

（一）安装

（二）标签上添加lang属性scss

三、基础语法

（一）数据展示

（二）数据循环v-for

（三）条件编译v-show、v-if

（四）计算属性computed

1.使用格式：

2.计算属性的加工功能：

3.计算属性的过滤功能：

四、事件

（一）事件的使用

（二）事件传参

五、组件

（一）组件的简单使用

（二）组件传参

1.父组件向子组件传参

2.子组件向父组件传递数据

3.全局数据传递

（三）组件插槽 slot

六、生命周期

（一）应用生命周期（常用）

（二）页面生命周期（常用）

（三）组件生命周期（常用）

（四）完整的生命周期相关文档

1.uni-app生命周期

2.Vue生命周期

3.微信小程序生命周期

一、脚手架搭建项目-使用powershell

（一）全局安装

 npm install -g @vue/cli

如果出现连接超时，可以先输入以下指令，再进行全局安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果更不幸，出现CERT_HAS_EXPIRED证书过期，可以输入以下指令之后，再重新进行上面的步骤

npm cache clean --force
npm config set strict-ssl false

（二）创建项目

 vue create -p dcloudio/uni-preset-vue colorize-front

如果出现连接超时，可以先从github（可以使用镜像网站GitHub: Let’s build from here · GitHub）上拉取dcloudio/uni-preset-vue到本地，再进行创建

git clone https://github.com/dcloudio/uni-preset-vue.git
 vue create -p C:\Users\saynoon\uni-preset-vue colorize-front

（三）启动项目，编译至微信小程序平台

 cd colorize-front
 npm run dev:mp-weixin

在编译项目时，又又又报错了：You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()]，愚蠢的我查了一天没看到别人遇到这个问题，最后还是依赖gpt解决了

解决方式：

在根目录下找到vue.config.js（没有就自己新建一个），添加配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin()
    ]
  }
}

好好好，搞了两天终于把项目搭起来了

二、sass的使用

（一）安装

npm install node-scss scss-loader

出现以下报错：

npm ERR! code 1
npm ERR! path D:\graduate\colorize-front\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: E:\nodejs\node.exe D:\graduate\colorize-front\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'E:\\nodejs\\node.exe',
npm ERR! gyp verb cli   'D:\\graduate\\colorize-front\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@8.4.1
npm ERR! gyp info using node@19.8.1 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - executable path is "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe"
npm ERR! gyp verb find Python - executing "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe" to get version
npm ERR! gyp verb find Python - version is "3.9.13"
npm ERR! gyp info find Python using Python version 3.9.13 found at "C:\Users\saynoon\AppData\Local\Microsoft\WindowsApps\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\python.exe"
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 19.8.1
npm ERR! gyp verb command install [ '19.8.1' ]
npm ERR! gyp verb install input version string "19.8.1"
npm ERR! gyp verb install installing version: 19.8.1
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 19.8.1
npm ERR! gyp verb build dir attempting to create "build" dir: D:\graduate\colorize-front\node_modules\node-sass\build
npm ERR! gyp verb build dir "build" dir needed to be created? Yes
npm ERR! gyp verb find VS msvs_version not set from command line or npm config
npm ERR! gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp verb find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp verb find VS looking for Visual Studio 2015
npm ERR! gyp verb find VS - not found
npm ERR! gyp verb find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\find-visualstudio.js:384:16
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\graduate\colorize-front\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:427:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:512:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1098:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:304:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19045
npm ERR! gyp ERR! command "E:\\nodejs\\node.exe" "D:\\graduate\\colorize-front\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\graduate\colorize-front\node_modules\node-sass
npm ERR! gyp ERR! node -v v19.8.1
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\saynoon\AppData\Local\npm-cache\_logs\2024-01-30T03_03_06_937Z-debug-0.log

node-sass 避坑大全, 以及npm安装心得_npm node-sass-CSDN博客，看完这篇博客之后去匹配了一下版本并使用了cnpm进行安装，继续报错...看的我一愣一愣的

 in ./src/pages/index2/index2.vue?vue&type=style&index=0&lang=scss&

Syntax Error: HookWebpackError: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
-- inner error --
Error: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.
Generated code for D:\graduate\colorize-front\node_modules\css-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[1]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\stylePostLoader.js!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\index.js??clonedRuleSet-22[0].rules[0].use[2]!D:\graduate\colorize-front\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[3]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\sass-loader\dist\cjs.js??clonedRuleSet-22[0].rules[0].use[4]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\index.js??clonedRuleSet-22[0].rules[0].use[5]!D:\graduate\colorize-front\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\index.js??vue-loader-options!D:\graduate\colorize-front\node_modules\@dcloudio\webpack-uni-mp-loader\lib\style.js!D:\graduate\colorize-front\src\pages\index2\index2.vue?vue&type=style&index=0&lang=scss&
1 | throw new Error("Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):\nError: Node Sass version 8.0.0 is incompatible with ^4.0.0.\n    at getSassImplementation (D:\\graduate\\colorize-front\\node_modules\\@dcloudio\\vue-cli-plugin-uni\\packages\\sass-loader\\dist\\getSassImplementation.js:46:13)\n    at Object.loader (D:\\graduate\\colorize-front\\node_modules\\@dcloudio\\vue-cli-plugin-uni\\packages\\sass-loader\\dist\\index.js:42:61)");

烦死了...还是安装dart-sass（也就是sass）吧，咱也不知道后面会不会出问题

cnpm install sass sass-loader

（二）标签上添加lang属性scss

<template>
	<view class="content">
		<view class="sass">sass</view>
	</view>
</template>

<script>

</script>

<style lang="scss">
	.content{
		.sass{
			background-color: red;
		}
	}
</style>

三、基础语法

（一）数据展示

1.在js的data函数中定义数据，可以是字符串、数字、布尔值，也可以是对象

2.在template中通过{{数据}}来展示；注意：{{后、}}前不可有空格

在标签的属性上通过 :data-index="数据"使用 注意：在属性上使用定义的数据，在属性前必须加上:，不加符号时无法识别为变量

（二）数据循环v-for

使用格式：

<view v-for="(item) in 数组名称" :key="item.唯一属性">
			{{item.任意属性}}
</view>

或者

<view v-for="(item,index) in 数组名称" :key="item.唯一属性">
			{{item.任意属性}}
</view>

item是从数组中取出的各个元素（命名随意，不是一定需要命名为item），index是各个元素的索引；如果没有唯一的属性，则key可以赋值为index

（三）条件编译v-show、v-if

v-show是通过样式实现的，适用于需要频繁做切换显示的标签。

v-if隐藏标签是通过删除标签实现的，适用于无需频繁做切换显示的标签。

使用格式：

<view v-if="true">1</view>
<view v-if="变量名">2</view>
<view v-show="true">3</view>
<view v-show="变量名">4</view>

（四）计算属性computed

1.使用格式：

在computed中写函数对数据进行处理，函数可以直接作为普通数据使用。

<template>
	<view class="content">
		<view>{{函数名}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				变量
			}
		},
		computed:{
			函数名(){
				return 变量处理
			}
		}
	}
</script>

2.计算属性的加工功能：

<template>
	<view class="content">
		<view>{{countMoney}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
			}
		},
		computed:{
			countMoney(){
				return "number:" + this.number
			}
		}
	}
</script>

3.计算属性的过滤功能：

对数组进行过滤处理时，不建议使用v-for和v-if结合使用；最好使用计算属性获得新数组

<template>
	<view class="content">
		<view v-for="(item,index) in filterList" :key="item.id">
			{{item.type}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:0,
						type:"aaa"
					},
					{
						id:1,
						type:"bbb"
					}
				]
			}
		},
		computed:{
			filterList(){
				return this.list.filter(v=>v.id>0)
			}
		}
	}
</script>

四、事件

（一）事件的使用

1.在template需要绑定的标签中，注册事件 @事件="事件名称"

2.在js的methods中定义事件回调

<template>
	<view class="content">
		<view @click="handleClick">点击a</view>
	</view>
</template>

<script>
	export default {
		methods:{
			handleClick(){
				console.log("加油鹿小葵！")
			}
		}
	}
</script>

<style></style>

（二）事件传参

1.直接通过函数传参

2.通过自定义属性传参

需要在事件函数中传$event，然后在event.currentTarget.dataset取得对应的值

自定义属性data-名称   对应 event.currentTarget.dataset.名称

<template>
	<view class="content">
		<view @click="handleClick1(1)">点击1</view>
		<view @click="handleClick1('a')">点击a</view>
        <!-- 自定义属性 -->
		<view data-i="hello" @click="handleClick2('b',$event)">点击哈哈哈哈</view>
	</view>
</template>

<script>
	export default {
		methods:{
			handleClick1(e){
				console.log("加油鹿小葵！" + e)
			},
            handleClick2(e, event){
				console.log(e);
				console.log(event);
				console.log(event.currentTarget.dataset.i)
			}
		}
	}
</script>

<style>

</style>

五、组件

（一）组件的简单使用

使用步骤：定义->引入->注册->使用

1.组件的定义：

在src目录下新建文件夹components用来存放组件，在该目录下新建组件

<template>
    <image class="img-border" src="https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp"></image>
</template>

<style>
.img-border{
    border-radius: 50%;
}
</style>

2.组件的引入：

在页面中引入组件

import 组件名 from '组件路径'

3.组件的注册：

在页面的实例中，新增属性components，把组件放入

4.组件的使用：

在页面中标签中，直接使用组件 <组件名></组件名>

注意：uni-app中，组件名使用中划线的格式

在页面中的使用（以上的步骤2-4）

<template>
	<view>
		<img-border></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		}
	}
</script>

<style lang="scss">

</style>

（二）组件传参

1.父组件向子组件传参

（1）子组件中，声明接收的父组件传值，然后在标签中使用

<template>
    <image class="img-border" :src="src"></image>
</template>

<script>
export default{
    //声明接受的父组件传值
    props:{
        src:String
    }
}
</script>

<style>
.img-border{
    border-radius: 50%;
}
</style>

（2）父组件传值给子组件

<template>
	<view>
		<img-border :src="src1"></img-border>
		<img-border :src="src2"></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		},
		data() {
			return{
				src1:"https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp",
				src2:"https://img-blog.csdnimg.cn/direct/4becfd7d213d412f90b8cdf06309c957.bmp"
			}
		}
	}
</script>

<style lang="scss">

</style>

2.子组件向父组件传递数据

（1）子组件通过触发事件传递

<template>
    <image @click="handleClick" class="img-border" :src="src"></image>
</template>

<script>
export default{
    //声明接受的父组件传值
    props:{
        src:String
    },

    methods:{
        //点击事件，向父组件传递数据
        handleClick(){
            //this.$emit(事件名称,传递的数据);
            this.$emit("srcChange",this.src);
        }
    }
}
</script>

<style>
.img-border{
    border-radius: 50%;
}
</style>

（2）父组件通过监听事件接收

<template>
	<view>
		<view>子组件传递的数据：{{src}}</view>
		<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
		<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
	</view>
	
</template>

<script>
// 引入自定义组件
	import imgBorder from "@/components/img-border/img-border";
	export default {
		//注册组件
		components:{
			imgBorder
		},
		data() {
			return{
				src:"",
				src1:"https://img-blog.csdnimg.cn/direct/a486118ffeda4cc2b447e174317f026b.bmp",
				src2:"https://img-blog.csdnimg.cn/direct/4becfd7d213d412f90b8cdf06309c957.bmp"
			}
		},
		methods:{
			handleSrcChange(e){
				this.src = e;
			}
		}
	}
</script>

<style lang="scss">

</style>

3.全局数据传递

常用的有以下两种方式

（1）通过Vue原型

在main.js中定义

import Vue from 'vue'

Vue.prototype.变量名=值

在页面中，通过this.变量名 即可获取到

（2）通过globalData（微信小程序特有的）

在App.vue中定义

<script>
	export default {
		globalData:{
            变量名：变量值
        }
	}
</script>

在页面中，通过getApp().globalData.变量名 即可获取到

（三）组件插槽 slot

标签其实也是数据的一种，父组件想实现动态地向子组件传递标签，可以使用插槽slot

1.在子组件中使用slot占位

<template>
    <view>
        <view class="title">标题</view>
        <slot></slot>
    </view>
</template>

<script></script>

2.在父组件中使用子组件时，传递标签

<template>
    <view class="content">
        <my-form>
            <!-- 传递标签 -->
            <view class="text">插槽</view>
        </my-form>
    </view>
</template>

<script>
    import myForm from '@/components/my-form';
    export default{
        components:{
            myForm
        }
    }
</script>

<style></style>

六、生命周期

uni-app框架的生命周期结合了vue和微信小程序的生命周期。

微信小程序三种对象：整个应用、页面对象、组件对象；

（一）应用生命周期（常用）

在App.Vue中，onLaunch页面加载完毕；onShow应用在前台显示；onHide应用被隐藏

<script>
	export default {
		// onLaunch页面加载完毕；onShow应用在前台显示；onHide应用被隐藏
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

（二）页面生命周期（常用）

用onLoad、onShow分别表示页面加载完毕时、页面显示时

<script>
    export default{
		onLoad(){
			console.log("页面加载完毕");
		},
        onShow(){
			console.log("页面展示了");
		}
    }
</script>

（三）组件生命周期（常用）

用mounted表示组件挂载完毕

<script>
    export default{
        mounted(){
            console.log("组件挂载完毕");
        }
    }
</script>

（四）完整的生命周期相关文档

1.uni-app生命周期

应用生命周期：App.vue/App.uvue | uni-app官网 (dcloud.net.cn)

页面生命周期：页面 | uni-app官网 (dcloud.net.cn)

2.Vue生命周期

生命周期钩子 | Vue.js (vuejs.org)

3.微信小程序生命周期

应用生命周期：小程序框架 / 逻辑层 / 注册小程序 (qq.com)

页面生命周期：小程序框架 / 逻辑层 / 注册页面 (qq.com)

组件生命周期：自定义组件 / 组件生命周期 (qq.com)

Sayatnoon
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uin-app微信小程序开发
weixin_70380078的博客
06-21 4777
uni-app 由 DCloud 公司开发，是一个使用 Vue.js 开发所有前端应用的框架，开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。在开始连接数据库之前，首先需要考虑的是选择哪种类型的数据库。五：在打开的命令框中找到对应的解压文件夹，如：d盘输入 D:，E盘就输入 E:。
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试能访问到本地的数据，由于微信小程序官方限制，如果打算做上线的应用请购买服务器，域名解析数据，这里不在细讲，适合新手和初学者当试手项目，大家可以交流学习！ git下载： https://gitee.com/lhxzlhm/juhuigou.git
使用uni-app开发微信小程序的实现
10-15
主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用uni-app开发并申请微信小程序的流程
最新发布
webhhhhhh的博客
03-14 404
新建uni-app项目： 打开HBuilderX，选择“文件”-“新建”-“项目”，然后选择“uni-app”类型，输入项目名称，点击创建按钮来初始化项目。配置项目： 在生成的项目根目录下的manifest.json文件中，填写从微信小程序后台获取的AppID。发布上线： 审核通过后，可以选择发布到线上，此时用户就可以在微信小程序列表中搜索并使用你的小程序了。版本管理： 设置项目的版本号，并提交审核，描述小程序的功能点及更新内容。等待审核： 微信官方会对小程序进行内容审核，确保符合其规范和政策要求。
使用uni-app开发微信小程序小Demo内置功能
10-16
1.向用户发送订阅消息(该功能需要开发者的小程序/appid和密钥，还有模板id，因为在目前阶段使用的是个人测试号，这些内容比较敏感所以注释了，想看效果可以自行注册微信开发工具账号) 2.读取微信文件/本地文件/只读取照片/只读取视频/读取照片或视频 3.读取用户基本信息：用户的唯一标识符（通常是 OpenID 或 UnionID）/用户的昵称/头像（头像 URL)/性别/城市/省份/国家/语言 点击头像跳转到登录日志页面(主要展示uni-app本地存储能力) 4.调用地图导航功能
uni-app使用微信小程序云函数的步骤示例
10-15
主要介绍了uni-app使用微信小程序云函数的步骤示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp集成windicss原子样式库的用法
Yyh18055242681的博客
12-20 334
uniapp集成windicss原子样式库的用法
uniapp开发微信小程序，从构建到上线
热门推荐
程邓楠的博客
06-09 4万+
本文主要介绍 uniapp 的基础使用，以及使用 uniapp 在企业开发的过程中的一个详细流程，比较适合第一次使用uniapp 开发微信小程序的伙伴，或者没有过实战经验的小伙伴参考；使用 Hbuildx 配合 Uniapp 框架结合 Uview 的UI框架为大家演示今天的Demo！......
微信小程序使用uni-app开发小程序及部分功能实现详解心得
Fang2001131919的博客
06-19 4311
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
uniapp 总结篇 （小程序）
^_^
07-23 1万+
做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。uniapp还是很强大的可以开发小程序、h5、pc、app。...
如何使用uni-app开发微信小程序
yong_19930826的博客
06-14 1万+
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅。
uni-app小程序开发 基础 看这篇就够了
我亦无他，唯手熟尔
08-25 3007
最近看uni-app框架的时候发现了这套课程，看到网络上大都是收费的资料，所以打算把这份资源开源共享出来，如果觉得有帮助的话，务必支持一下
UNI-APP开发微信小程序的基本流程
也是你的博客
02-14 1964
如需分享给他人体验，则可在【管理】-【成员管理】中添加“体验成员”才能体验功能。无论是调试还是发行，请确保没打开多个【微信开发者工具】客户端，否则会出现白屏。点击“体验版”，可生成二维码，用自己的微信平台管理账号扫码，可进行线上体验。无账号，申请完账号后，进入账号填写相关信息，获取appId。以上完成了完整的【注册】—【发布测试】，以下则是发布生产。提交审核：【管理-版本管理】，首次发布需要填写隐私设置。获取appId：【开发-开发管理-开发设置】审核通过后，可在【审核版本】中申请发布。
uniapp使用taiwindcss多平台开发并保持原生写法插件
HHH917的博客
08-26 2394
weapp-tailwindcss-webpack-plugin 插件作者的另一款插件 tailwindcss-miniprogram-preset 我已在项目中使用过 并使其兼容h5 微信小程序 APP 但是 tailwindcss-miniprogram-preset 插件需要自己配置预设 且没有使用jit引擎 加载使用比较慢 配置也相对麻烦。weapp-tailwindcss-webpack-plugin 的github文档也是很完整 相关demo也比较友善。......
我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】
isHoMeTown的博客
05-27 694
前言 聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。 项目背景 最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex 上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基本的开发程序员，初级较多。但是学习还是有必要的，那么学习后就需要一个成熟的项目，体系完整的项目来巩固一下自
手撸一套原子类css(类似tailwindcss、unocss、windcss)
weixin_42424283的博客
11-11 4288
用最少的代码手敲一套原子类css，共计约1100个左右的常用样式； 关于增加1100个左右的样式会不会增加项目体积，新项目的大小约8kb,加上1100个样式后为45kb； github仓库地址：wfxt0911/atomicClass: 原子类css (github.com) 如果该示例对你有启发，希望您给个Star
vue 中使用 Windi CSSS 样式库
weixin_60084748的博客
08-23 1346
2，项目中配置 Windi CSSS vite为例 在vite.config.js 中配置。Windi CSSS 在vue3 中简单使用。1，安装 Windi CSSS。3，vscode 中安装。Windi CSSS 插件。
uniapp快速开发小程序全流程
weixin_45565886的博客
07-05 4979
uniapp快速开发小程序全流程
uniApp开发小程序基础教程（一）
u013746071的专栏
08-23 3515
uniapp-开发微信小程序
介绍基于uni-app的微信小程序的系统优化过程
04-19
好的，我可以为您介绍基于uni-app的微信小程序的系统优化过程。首先，我们需要考虑小程序的加载速度和性能。为此，可以采取以下措施：使用uni-app自带的编译器进行编译，使用延迟加载技术来加载图片和视频等资源，使用webpack分包技术，减少首次打开小程序的加载时间。其次，我们也可以通过调整小程序的渲染方式、构建优化等手段来优化系统性能。最后，我们需要进行测试和调试，使用工具对小程序进行性能评估和优化，例如使用微信开发者工具自带的Performance工具进行评估和优化。以上是基于uni-app的微信小程序系统优化的一些措施，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值