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

已于 2022-04-21 13:10:56 修改
阅读量1.4k 收藏
点赞数
分类专栏： 小程序 文章标签： 前端 微信小程序 小程序
于 2022-04-21 13:02:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ailsa_csdn/article/details/124319045
版权

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 1351
在购物车页面，商品数量输入框汇中通过正则表达式匹配正整数，限制非法输入，点击全选可以改变全部商品选择状态，左滑可以有删除功能。点击之后进入商品详情页，商品详情页，产品图片轮播展示，点击图片可以进行放大预览，产品详情页通过富文本组件渲染服务器返回的html内容。首页有置顶的搜索框，分类页面有两个scroll-view标签，点击之后进入商品列表页，商品列表页做了上拉加载，下拉刷新的功能。点击加入购物车可以进入购物车页面，此时产品数据会存到到vuex中，vuex中调用函数，重新更新Storage本地存储的数组。
用uniapp写一个内置组件的小程序代码
weixin_42613360的博客
02-13 231
您好！我很高兴为您写一个 uniapp 的内置组件的小程序代码。 首先，您需要创建一个 uniapp 项目，并打开项目的页面文件夹。然后，您可以在页面文件夹中创建一个新的 .vue 文件，并编写以下代码： <template> <view class="container"> <text>这是一个内置组件的小程序代码</text> &...
uniapp或微信小程序项目的project.config.json配置文件
最新发布
Tomorrow belongs to those who prepare for it today.
03-21 576
可以配置项目在微信开发者工具中的行为，配置文件中的。project.config.json是。
uni-app 微信小程序之好看的ui登录页面（二）
@必意玲
12-07 7973
文章目录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 3087
先把官网文档摆在这，后面会用到的。
uni-app小程序开发实战 | (从零设计一款个人中心页面，最详细)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-30 6999
个人中心页面很常用，几乎每个app里面都少不了。同时个人中心页也较简单，可以作为UI项目练手，熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面，并详细介绍从零的实现过程，分享给有需要的小伙伴，需要的可以收藏。
uni-app 系列之（一）—— 快速入门
且听风吟的博客
03-16 418
uni-app 快速入门
uni-app 经验分享，从入门到离职（年度实战总结：经验篇）——上传图片以及小程序隐私保护指引设置
热门推荐
黛琳ghz的博客，期待你的关注。
01-18 4万+
白马过隙，转瞬之间 23 年的进度条已经快达到 100%，在迎接 24 年到来的同时，我们不妨来回顾一下这充满许多值得回忆时刻的 23年。过去的一年里，我们都经历了很多事情，或许经历了许多重要的时刻和学习机会；或许扩展了自己的知识领域；或许提升了自己的技术水平等等。接下来我来分享一下我在 23 年的一些代码笔记以及实战项目笔记。
uniapp制作app与小程序前端——配置各页面
hk_hkl的博客
05-09 474
手把手玩转uniapp前端No.2
uniApp正则校验手机、邮箱
weixin_49684489的博客
11-25 3649
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 1426
零基础入门学习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 1936
运行到小程序，小程序引入的项目也选择正确才可以。
uniapp报错--app.json: 在项目根目录未找到 app.json
无翼之雀的博客
07-07 3202
我的小程序代码编译后的工程文件目录为：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 1825
uniapp使用微信开发工具打开微信小程序运行[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
uni-app项目在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json
谁人打的太极拳的博客
05-19 2952
既在导入项目选择要导入的项目的存放路径时，点至mp-weixin，一般为项目中unpackage-->dist-->dev-->mp-weixin。在微信开发者工具打开时报错[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json。出现这个问题是因为打开的文件地址不对，解决这个问题首先我们要查看是否有unpackage。，如果有，项目直接指向unpackage\dist\dev\mp-weixin即可。
uni-app商城实战教程：从入门到项目完成
uni-app是一个使用Vue.js开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括微信小程序）等多个平台。这个系列教程将引导开发者通过构建一个商城项目来从基础入门到实际开发的全...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值