uni-app 入门（一）——认识小程序

原创 已于 2022-04-21 13:10:56 修改 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #微信小程序 #小程序

于 2022-04-21 13:02:41 首次发布

1. 开发前的准备工作

  1. 微信公众平台 注册账号并登录
  • 点击 “立即注册”
    image.png
  • 注册类型：选择小程序
    image.png
  • 填写注册信息、验证邮箱等
    image.png
  • 注册完成后进行登录
    image.png
  1. 下载并安装 【微信开发者工具】
  • 微信公众平台 ==》 开发 ==》 开发工具
    image.png
  • 下载稳定版并安装
  • 安装好的开发者工具，然后扫码进行登录
    image.png
  1. 开发者工具介绍
  • 登录后的微信开发者工具
    image.png
  • 新建项目
    image.png
  • APPID 获取
    • 打开微信公众平台
      image.png
  1. 小程序项目结构
    image-20210503095033115.png

2. 小程序项目的基本组成结构

问题引入

最低0.47元/天 解锁文章
uni-app 经验分享，从入门到离职（三）——关于 uni-app 生命周期快速了解上手
黛琳ghz的博客，期待你的关注。
02-02 3万+
这篇文章是本专栏 uni-app 基础篇的第三章，通过上一篇文章的基础，我们继续对 uni-app 进行更深一步的了解和学习，这篇文章的主要内容的是讲一下在 uni-app 中的应用生命周期函数，以及关于 App.vue/App.uvue 文件在项目中的作用。
uni-app 经验分享，从入门到离职（五）——由浅入深 uni-app 数据缓存
黛琳ghz的博客，期待你的关注。
02-23 3万+
这篇文章是本专栏 uni-app 的基础篇的第五章，文章的主要内容是关于 uni-app 数据缓存的相关知识，包括如何使用 uni-app 提供的数据缓存 API 进行数据的读取、存储和删除操作。
uniapp小程序页面展示
2201_75783276的博客
04-12 1441
在购物车页面，商品数量输入框汇中通过正则表达式匹配正整数，限制非法输入，点击全选可以改变全部商品选择状态，左滑可以有删除功能。点击之后进入商品详情页，商品详情页，产品图片轮播展示，点击图片可以进行放大预览，产品详情页通过富文本组件渲染服务器返回的html内容。首页有置顶的搜索框，分类页面有两个scroll-view标签，点击之后进入商品列表页，商品列表页做了上拉加载，下拉刷新的功能。点击加入购物车可以进入购物车页面，此时产品数据会存到到vuex中，vuex中调用函数，重新更新Storage本地存储的数组。
用uniapp写一个内置组件的小程序代码
weixin_42613360的博客
02-13 245
您好！我很高兴为您写一个 uniapp 的内置组件的小程序代码。 首先，您需要创建一个 uniapp 项目，并打开项目的页面文件夹。然后，您可以在页面文件夹中创建一个新的 .vue 文件，并编写以下代码： <template> <view class="container"> <text>这是一个内置组件的小程序代码</text> &...
uni-app 微信小程序之好看的ui登录页面（二）
@必意玲
12-07 8847
文章目录1. 页面效果2. 页面样式代码 1. 页面效果 2. 页面样式代码 <!-- 蓝色登录页面2 --> <template> <view style="height:100vh;background: #fff;"> <view class="img-a"> <view class="t-b"> 您好， <br /> 欢迎使用，XXX小程序 </view> </v
Uniapp学习之从零开始写一个简单的小程序demo（新建页面，通过导航切换页面，发送请求）
weixin_56039103的博客
09-05 3403
先把官网文档摆在这，后面会用到的。
uni-app小程序开发实战 | (从零设计一款个人中心页面，最详细)
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
05-30 7688
个人中心页面很常用，几乎每个app里面都少不了。同时个人中心页也较简单，可以作为UI项目练手，熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面，并详细介绍从零的实现过程，分享给有需要的小伙伴，需要的可以收藏。
uni-app 系列之（一）—— 快速入门
且听风吟的博客
03-16 464
uni-app 快速入门
uni-app 经验分享，从入门到离职（年度实战总结：经验篇）——上传图片以及小程序隐私保护指引设置
热门推荐
黛琳ghz的博客，期待你的关注。
01-18 4万+
白马过隙，转瞬之间 23 年的进度条已经快达到 100%，在迎接 24 年到来的同时，我们不妨来回顾一下这充满许多值得回忆时刻的 23年。过去的一年里，我们都经历了很多事情，或许经历了许多重要的时刻和学习机会；或许扩展了自己的知识领域；或许提升了自己的技术水平等等。接下来我来分享一下我在 23 年的一些代码笔记以及实战项目笔记。
uniapp制作app与小程序前端——配置各页面
hk_hkl的博客
05-09 504
手把手玩转uniapp前端No.2
uniApp正则校验手机、邮箱
weixin_49684489的博客
11-25 3762
uniApp正则校验手机、邮箱 // 导出 export default{ //校验邮箱格式 checkEmail :function (email){ return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/).test(email); }, //校验手机格式 checkMobile :function (mobile){ ret
uni-app入门:WXML数据绑定
weixin_43401380的博客
11-18 1474
零基础入门学习uniapp之wxml数据绑定。
uniApp正则表达式校验手机、邮箱
蛋叔
04-05 1万+
主要介绍下uniApp中正则的使用，以校验手机、邮箱为例。 //util.js文件主要写的是会经常使用到的工具类 //校验邮箱格式 function checkEmail(email){ return RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]...
uniapp项目，[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json (env: Windows,mp,1.06.2210310； lib: 2.30.1)
qq_41920758的博客
10-24 2191
运行到小程序，小程序引入的项目也选择正确才可以。
uniapp报错--app.json: 在项目根目录未找到 app.json
最新发布
无翼之雀的博客
07-07 3529
我的小程序代码编译后的工程文件目录为：dist/dev/mp-weixin/2. 配置miniprogramRoot，指定小程序代码的根目录。1. 程序根目录打开project.config.json文件。
启动uniapp小程序报错：Error:app.json:在项目根目录中未找到app.json
weixin_73318685的博客
09-25 1万+
产生原因：uniapp小程序不能直接被微信开发者工具解析编译，需要先生成unpackage文件夹再进行编译。 解决方案共有两种（任选其一即可）：方案一：前提是项目代码中已经含有 unpackage 这个文件夹且mp-weixin文件夹不为空，直接编译运行mp-weixin即可 方案二：使用其他编辑器打开项目，然后编译到微信开发者工具启动项目 （推荐）
uniapp使用微信开发工具打开微信小程序运行[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
lchmyhua88的博客
05-28 1898
uniapp使用微信开发工具打开微信小程序运行[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
谁人打的太极拳的博客
05-19 3204
既在导入项目选择要导入的项目的存放路径时，点至mp-weixin，一般为项目中unpackage-->dist-->dev-->mp-weixin。在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json。出现这个问题是因为打开的文件地址不对，解决这个问题首先我们要查看是否有unpackage。，如果有，项目直接指向unpackage\dist\dev\mp-weixin即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值