小程序注册

【 一 】小程序注册

微信公众平台

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

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

image-20240524120626520

注册

image-20240523235300023

邮箱激活

image-20240524114351418

image-20240524114722768

小程序账户注册

image-20240524114954514

image-20240524115322393

微信小程序配置

image-20240524115415277

image-20240524161705217

image-20240524163256106

微信小程序开发流程

image-20240524162724284

image-20240524161147998

image-20240524161208912

  • 添加项目成员

image-20240524161453860

image-20240524161558168

【 二 】云服务

lass 基础设施服务(组装机) 你买了一大堆的电脑配件,cpu主板,然后组装完成后,装上系统就可以上网,还要自己提供场地 环境。

pass平台即服务 (品牌机) 买回来开机就行。 需要自己提供环境(电源)

saas软件即服务 (去网吧、汤池) 电脑、场地、环境(电源,网线,饮料)都是

网吧提供的服务。

【 三 】创建微信小程序项目

3.1 创建项目流程(开发者)

# 1 获取 小程序id-小程序后台--》开发--》开发管理--》开发设置--》开发者ID-AppID(小程序ID)	     wx539e097341fc7588# 2 下载微信开发者工具--》这个工具必须联网才能使用-下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html-wechat_devtools_1.06.2402040_win32_x64.exe# 3 一路下一步安装--》桌面有个快捷方式-微信开发者工具就等同于 pycharm

image-20240524163608772

image-20240524163654390

下载开发工具

image-20240524163940534

image-20240524164002341

image-20240524164018469

image-20240524164032435

3.2 创建项目

# 1 双击 微信开发者工具# 2 微信扫码--》登录# 3 创建项目-填写名字-路径-APPID-不使用云开发【使用腾讯云的云函数,服务器等等,需要花钱】-不使用模版-可以选择js基础版--》别的别选了-TS:咱们不会-其他模版功能比较复杂对新手不友好# 4 基础设置-设置--》编辑器设置--》改变字体大小-视图--》外观--》移动模拟器位置-可以勾选掉不显示:模拟器,调试器等

image-20240524160445046

image-20240524160517959

image-20240524164326567

image-20240524164814977

3.3 本地开发支持http

# 本地开发--》使用django写后端- django运行在 0.0.0.0:8000 地址-微信小程序才能通过ip地址访问到我们的django项目的接口-微信小程序默认不支持http--》django运行在http上--》修改一下--》微信小程序配置-让小程序支持 http请求

image-20240524164949584

【 四 】项目目录结构

image-20240524165331212

4.1 项目目录结构

4.1.1 目录介绍

# 1 项目主配置文件,在项目根路径下,控制整个项目的-app.js    # 小程序入口文件,小程序启动,会执行这个js-app.json  # 小程序的全局配置:顶部的颜色,标题。。。-app.wxss  # 小程序全局样式:所有样式,全局生效# app.js 和app.json 必须有,没有不行# 2 页面文件-pages文件夹下,有一个个的文件夹(index,login,register)-->每个文件夹下有4个文件-xx.js     # 页面逻辑,js代码控制-xx.wxml   # 页面结构,布局,html---》wxml就等同于html,但标签有些区别-xx.json   # 页面配置,当前页面顶部颜色,标题。。-xx.wxss   # 页面的样式,如果全局样式也有,以当前页面为准# xx.js和xx.wxml 必须得,不能没有# 3 其他的不重要

image-20240524165054369

image-20240524165544425

├── components                  【页面中使用的组件】
├── pages   					【页面文件目录】
│   ├── index					【页面】
│   │   ├── index.js				【页面JS】
│   │   ├── index.json				【页面配置】
│   │   ├── index.wxml				【页面HTML】
│   │   └── index.wxss				【页面CSS】
│   └── logs					【页面】
│       ├── logs.js					...
│       ├── logs.json				...
│       ├── logs.wxml				...
│       └── logs.wxss				...
├── utils						【自定义工具】
│	└── utils.js					【功能的定义】
├── app.js						【全局JS】
├── app.json					【全局配置】
├── app.wxss					【全局CSS】
├── project.config.json			【开发者工具默认配置】
├── project.private.config.json	【开发者工具用户配置,在这里修改,优先用这个,可以删除】
├── .eslintrc.js				【ESlint语法检查配置】
├── sitemap.json				【微信收录页面,用于搜索,上线后,搜索关键字就可以搜到我们】

新建页面

  • 只需要在app.json

  "pages": ["pages/login/login","pages/index/index"],

image-20240524172523845

选择文件项目显示模拟器

image-20240524172658381

纯净项目

# 把项目不要的东西都删除--》只留核心--》开发# # # # # app.json# # # # ## # # # #
{"pages": [  "pages/index/index"  # 就一个页面],"window": {"navigationBarTitleText": "功能演示",   # 标题"navigationBarBackgroundColor": "#0000FF", #颜色"enablePullDownRefresh": false,  # 是否带下拉刷新"backgroundColor": "#00FFFF",    # 下拉刷新颜色"backgroundTextStyle": "dark"    # light ,下拉刷新的点点什么颜色},"style": "v2",
}# # # # #app.wxss  空的# # # # ## # # # ## # # # #app.js# # # # ## # # # #
App({})# # # # #pages/index# # # # ## # # # #index.jsPage({})index.json{"usingComponents": {},"navigationBarTitleText": "登录页面", "navigationBarBackgroundColor": "#FFFF00","enablePullDownRefresh": true,   "backgroundTextStyle": "light" }index.wxml<view class="container">彭于晏--呸呸呸</view>index.wxss-空的

image-20240524172151225

【 五 】快速上手

5.1 小程序常用组件

#1 做过htmla标签div标签span标签img标签。。。# 2 小程序没有这些,自己封装的叫组件-https://developers.weixin.qq.com/miniprogram/dev/component/# 3 text  ---》span 不换行,放文字
<text>我是首页</text>
<text>我是首页333</text>
<text>我是首页444</text># 4 view--》div  换行
<view>我是view</view>
<view>我是view222</view>
<view><text>撒东方闪电</text></view># 5 image 标签---》img
<image src="/images/b.jpg" style="width: 750rpx;height: 400rpx;"></image># 6 icon
<icon type="success_no_circle"  color="red"/>
<icon type="cancel" color="#ddd"/>

5.2 tabbar配置

# 在底部或在顶部的 tab页-几乎所有小程序都会有这个# 如何设置
1 在app.json 配置
"tabBar": {"selectedColor": "#b4282d","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/home.png","selectedIconPath": "images/home_select.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my_select.png"}]
},2 创建页面 my3 把图片复制到images目录下
  • app.json

{"pages": ["pages/banner/banner","pages/log/log"],"window": {"enablePullDownRefresh": false,  "backgroundColor": "#00FFFF",  "backgroundTextStyle": "dark"   },"tabBar": {"selectedColor": "#b4282d","position": "bottom","list": [{"pagePath": "pages/banner/banner","text": "首页","iconPath": "images/home.png","selectedIconPath": "images/home_select.png"},{"pagePath": "pages/log/log","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my_select.png"}]
},"style": "v2","sitemapLocation": "sitemap.json"}

image-20240526185628474

image-20240526185640944
“selectedIconPath”: “images/home_select.png”
},
{
“pagePath”: “pages/log/log”,
“text”: “我的”,
“iconPath”: “images/my.png”,
“selectedIconPath”: “images/my_select.png”
}
]
},

“style”: “v2”,
“sitemapLocation”: “sitemap.json”

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI早班车2024.6.25

全球AI新闻速递 1.高通&#xff1a;开放 AI 模型&#xff0c;帮助开发者打造骁龙 X Elite 平台智能应用。 2.OpenAI&#xff1a;收购数据库分析公司Rockset。 3.大众海外版车型支持 ChatGPT。 4.乐聚夸父人形机器人&#xff0c;搭载华为云盘古具身智能大模型。 5.微软正努力…

Day45

Day45 jQuery动画 显示和隐藏 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script src"js/jquery-1.8.2.js" type"text/javascript" charset"utf-8"></script&…

Linux系统移动光标类命令

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

iHRM人力资源管理系统测试用例集

1、初始化项目环境 1&#xff09;初始化用例集 2&#xff09;初始化环境&#xff1a;测试环境&#xff0c;生产环境&#xff08;不同环境对应不同的url&#xff0c;在进行用例集测试之前一定要指定环境&#xff09; 3&#xff09;单接口模块 从Excel表格的测试用例文档中提…

云南省森林管理新篇章:可视化大屏引领绿色智慧革命

在云南省这片绿意盎然的土地上&#xff0c;森林不仅是自然的宝藏&#xff0c;更是生态的守护者。 想象一下&#xff0c;站在巨大的屏幕前&#xff0c;云南省的森林分布、生长状况、病虫害情况等信息一目了然&#xff0c;仿佛拥有了一双能够洞察森林奥秘的“智慧眼”。这正是森林…

输入/输出文字

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在海龟绘图中&#xff0c;也可以输入或者输出文字&#xff0c;下面分别进行介绍。 1 输出文字 输出文字可以使用write()方法来实现&#xff0c;语…

使用Python实现手势替代鼠标操作并生成.exe可执行文件

使用Python实现手势替代鼠标操作并生成.exe可执行文件 在现代计算机交互中&#xff0c;手势识别作为一种自然的人机交互方式&#xff0c;逐渐受到人们的关注。本文将介绍如何使用Python实现手势替代鼠标操作&#xff0c;并生成一个可执行的.exe文件&#xff0c;使得这项技术更…

python常见概念

文章目录 1.python是什么&#xff1f;2.编辑器的选择——pycharm3.第一个python程序4.print函数5.关键字介绍6.python的注释方式7.python语句分类 1.python是什么&#xff1f; Python 是一种面向对象的解释性的计算机程序设计语言&#xff0c;也是一种功能强大而完善的通用型语…

浊度传感器设备的监测控制和智慧运维

浊度传感器是一种用于测量液体中悬浮颗粒浓度从而反映液体浊度的设备。 其工作原理主要基于以下几种常见方式&#xff1a; 1. 散射光测量原理&#xff1a;当光线穿过含有悬浮颗粒的液体时&#xff0c;颗粒会使光线发生散射。传感器通过测量特定角度的散射光强度来确定浊度。散…

数据中台/数据仓库必问的数量质量控制面试题

目录 什么是数据质量?如何定义高质量的数据? 数据质量的五个维度是什么? 解释“准确性”在数据质量中的含义。 数据清洗与数据质量控制之间的关系是什么? 数据质量评估的常用方法有哪些? 如何建立数据质量评分体系? 数据治理与数据质量控制的关系是什么? 描述一…

MySQL常用的函数

1、concat&#xff08;a&#xff0c;b&#xff09;&#xff1a;把传入的参数连成一个字符串。 2、lower()/upper()&#xff1a;转换为小写/转换为大写。 3、replace&#xff08;&#xff09;&#xff1a;替换字符串。 4、trim&#xff08;&#xff09;&#xff1a;去掉开头和…

入门 PyTorch ,这70个操作技巧就够了

Pytorch 是当下最流行的算法框架&#xff0c;很多大模型都是基于Pytorch 搭建而成&#xff0c;它提供了大量操作用于创建和训练神经网络。 今天给大家分享 Pytorch 的19个方面&#xff0c;涉及到70个细节操作&#xff0c;这部分内容梳理花了我一天的时间&#xff0c;喜欢记得点…

骑马与砍杀战团mod制作-基础-对话制作笔记(四)

骑马与砍杀战团mod制作-基础-对话制作笔记&#xff08;四&#xff09; 资料来源 学习的资料来源&#xff1a; b站【三啸解说】手把手教你做【骑砍】MOD&#xff0c;基础篇&#xff0c;链接为&#xff1a; https://www.bilibili.com/video/BV19x411Q7No?p4&vd_sourcea507…

免费领!系统学习上位机编程的流程与基础教程

上位机电气自动化plc编程全套入门教程工具 华山编程导师根据当前招聘需求的关键点&#xff0c;原创录制了一套系统的学习流程和基础教程&#xff0c;帮助你从快速入门到掌握上位机编程的技能。 二. 学习准备 为了更好地学习并实现80%以上的代码运行&#xff0c;建议准备一个工…

Android音频系统

最近在做UAC的项目&#xff0c;大概就是接收内核UAC的事件&#xff0c;也就是声音相关事件。然后就是pcm_read和AudioTrackr->write之间互传。感觉略微有点奇怪&#xff0c;所以简单总结一下。 1 UAC的简要流程 open_netlink_socket 打开内核窗口&#xff0c;类似于ioctl。…

[leetcode]valid-triangle-number. 有效三角形的个数

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int triangleNumber(vector<int>& nums) {int n nums.size();sort(nums.begin(), nums.end());int ans 0;for (int i 0; i < n; i) {for (int j i 1; j < n; j) {int left j 1, righ…

大模型RAG技术:构建高效、可信赖的知识检索系统

前言 LLM 问题 幻觉&#xff1a;在没有答案的情况下提供虚假信息。 过时&#xff1a;当用户需要特定的当前响应时&#xff0c;提供过时或通用的信息。 来源&#xff1a;从非权威来源创建响应。由于术语混淆&#xff0c;不同的培训来源使用相同的术语来谈论不同的事情&#…

网络构建和设计方法_1.网络需求分析

1.网络需求分析 网络需求分析是网络构建及开发过程的起始环节&#xff0c;也是极其重要的阶段。在该阶段&#xff0c;可尽早明确客户使用网络的真实用途或痛点&#xff0c;以便为后续能够构建和设计出更贴近客户真实诉求的网络打下坚实基础&#xff0c;前期的网络需求分析至关…

制造业包括哪些?需要堡垒机吗?

制造业-国民经济的主体&#xff0c;是立国之本、兴国之器、强国之基&#xff0c;一个关系着大家吃穿住行的行业&#xff0c;一个与大家息息相关的行业。但大家对于制造业还有很多不了解&#xff0c;有小伙伴在问&#xff0c;制造业包括哪些&#xff1f;需要堡垒机吗&#xff1f…

深入探索npm依赖:掌握查看与管理包依赖的艺术

深入探索npm依赖&#xff1a;掌握查看与管理包依赖的艺术 在JavaScript和Node.js的世界中&#xff0c;npm&#xff08;Node Package Manager&#xff09;不仅是一个包管理器&#xff0c;更是一个强大的工具&#xff0c;用于管理项目依赖。理解并掌握如何查看和管理npm包的依赖…