小程序注册

【 一 】小程序注册

微信公众平台

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.js
    	Page({})
    index.json
        {
          "usingComponents": {

          },
          "navigationBarTitleText": "登录页面", 
          "navigationBarBackgroundColor": "#FFFF00",
          "enablePullDownRefresh": true,   
          "backgroundTextStyle": "light" 
        }
    index.wxml
      <view class="container">
        彭于晏--呸呸呸
      </view>
    index.wxss
    	-空的

image-20240524172151225

【 五 】快速上手

5.1 小程序常用组件

#1 做过html
	a标签
    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 创建页面 my

3 把图片复制到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”

}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Live Wallpaper Themes 4K Pro for Mac v19.9 超高清4K动态壁纸

Live Wallpaper Themes 4K Pro for Mac v19.9 超高清4K动态壁纸

Live Wallpaper & Themes 4K Pro for Mac v19.7 是一款专为Mac用户设计的超高清4K动态壁纸应用程序。它凭借出色的视觉效果和丰富的个性化设置&#xff0c;为用户带来全新的桌面体验。 这款软件提供了大量精美的动态壁纸供用户选择&#xff0c;涵盖了各种风格和主题&#…
阅读更多...
STM32学习-HAL库 串口通信

STM32学习-HAL库 串口通信

学完标准库之后&#xff0c;本来想学习freertos的&#xff0c;但是看了很多教程都是移植的HAL库程序&#xff0c;这里再学习一些HAL库的内容&#xff0c;有了基础这里直接学习主要的外设。 HAL库对于串口主要有两个结构体UART_InitTypeDef和UART_HandleTypeDef&#xff0c;前者…
阅读更多...
【数据科学】12小时学完数据科学(入门)---二

【数据科学】12小时学完数据科学(入门)---二

阅读更多...
Java三层框架的解析

Java三层框架的解析

引言&#xff1a;欢迎各位点击收看本篇博客&#xff0c;在历经很多的艰辛&#xff0c;我也是成功由小白浅浅进入了入门行列&#xff0c;也是收货到很多的知识&#xff0c;每次看黑马的JavaWeb课程视频&#xff0c;才使一个小菜鸡见识到了Java前后端是如何进行交互访问的&#x…
阅读更多...
亚马逊云科技官方活动：一个月拿下助理架构师SAA＋云从业者考试认证（送半价折扣券）

亚马逊云科技官方活动：一个月拿下助理架构师SAA＋云从业者考试认证（送半价折扣券）

为了帮助大家考取AWS SAA和AWS云从业者认证&#xff0c;小李哥争取到了大量考试半价50%折扣券&#xff0c;使用折扣券考试最多可省75刀(545元人民币)。 领取折扣券需要加入云师兄必过班群&#xff0c;在群中免费领取。目前必过班群招募到了超过200名小伙伴&#xff0c;名额有限…
阅读更多...
杂记 | 搭建反向代理防止OpenAI API被封禁（对于此次收到邮件提示7月9日后将被屏蔽的解决参考）

杂记 | 搭建反向代理防止OpenAI API被封禁（对于此次收到邮件提示7月9日后将被屏蔽的解决参考）

文章目录 重要声明&#xff08;免责&#xff09;01 OpenAI封禁API的情况02 解决方案及原理2.1 原因分析2.2 解决方案2.3 步骤概述 03 操作步骤3.1 购买一个海外服务器3.2 申请一个域名3.3 将域名指向代理服务器3.4 在代理服务器上安装nginx3.5 配置反向代理 重要声明&#xff0…
阅读更多...
如何利用小猪APP分发进行高效的APP封装打包

如何利用小猪APP分发进行高效的APP封装打包

你有没有想过&#xff0c;为什么有些应用程序似乎在一夜之间就上线了&#xff0c;而你的应用却还在封装打包的过程中挣扎&#xff1f;别担心&#xff0c;这里有一个秘密武器&#xff0c;它叫做小猪APP分发。 小猪app封装www.ppzhu.net 什么是APP封装打包&#xff1f; APP封装…
阅读更多...
从零开始做题：修猫

从零开始做题：修猫

修猫 1 题目 2 解题 2.1 使用Stegslove分析图片 (base) ┌──(holyeyes㉿kali2023)-[~/Misc/tool-misc] └─$ java -jar Stegsolve.jar 2.2 analyse -frame browser 2.3 得到flag DASCTF{818ca3a840e768da7d5fcdeaedd5012f}
阅读更多...
解决GPU 显存未能完全释放

解决GPU 显存未能完全释放

一、 现象 算法同学反馈显存未能完全释放。 二、解决方法 一条命令搞定 注意&#xff1a;执行时注意不要误杀其他的python进程&#xff0c;需要确认好。 我的这条命令是将所有python进程都杀死了 ps -elf | grep python | awk {print $4} | xargs kill -s 9
阅读更多...
Redis源码学习：SDS设计与内存管理

Redis源码学习：SDS设计与内存管理

为什么Redis选择SDS 1、缓解C语言字符串的缺陷 在 C 语言中可以使用 char* 字符数组来实现字符串。每个字符串分配一段连续的内存空间&#xff0c;依次存放字符串中的每一个字符&#xff0c;最后以null字符结尾。这种设计存在以下问题&#xff1a; 1、低效的操作 每次获取字…
阅读更多...
【containerd】Containerd高阶命令行工具nerdctl

【containerd】Containerd高阶命令行工具nerdctl

前言 对于习惯了使用docker cli的用户来说&#xff0c;containerd的命令行工具ctr使用起来不是很顺手&#xff0c;此时别慌&#xff0c;还有另外一个命令行工具项目nerdctl可供我们选择。 nerdctl是一个与docker cli风格兼容的containerd的cli工具。 nerdctl已经作为子项目加入…
阅读更多...
数据分析必备：一步步教你如何用matplotlib做数据可视化（12）

数据分析必备：一步步教你如何用matplotlib做数据可视化（12）

1、Matplotlib 3D线框图 线框图采用值网格并将其投影到指定的三维表面上&#xff0c;并且可以使得到的三维形式非常容易可视化。plot_wireframe()函数用于此目的 import matplotlib.pyplot as plt import numpy as np import math import seaborn as sns plt.rcParams[font.s…
阅读更多...
新增题目接口开发

新增题目接口开发

文章目录 1.基本设计2.生成CRUD代码1.生成五张表的代码1.subject_info2.subject_brief3.subject_judge4.subject_multiple5.subject_radio 2.将所有的dao放到mapper文件夹3.将所有实体类使用lombok简化4.删除所有mapper的Param("pageable") Pageable pageable5.删除所…
阅读更多...
nacos 整合 openfeign实现远程调用

nacos 整合 openfeign实现远程调用

结合之前写过的案例 Springcloud Alibaba nacos简单使用 Springcloud 之 eureka注册中心加feign调用 在微服务架构中&#xff0c;服务注册与发现是一个关键组件。Nacos 是一个开源的服务注册与发现、配置管理平台&#xff0c;而 OpenFeign 是一个声明式的 Web 服务客户端&am…
阅读更多...
6.25作业

6.25作业

1.整理思维导图 2.终端输入两个数&#xff0c;判断两数是否相等&#xff0c;如果不相等&#xff0c;判断大小关系 #!/bin/bash read num1 read num2 if [ $num1 -eq $num2 ] then echo num1num2 elif [ $num1 -gt $num2 ] then echo "num1>num2" else echo &quo…
阅读更多...
优雅谈大模型13：LangChain Vs. LlamaIndex

优雅谈大模型13：LangChain Vs. LlamaIndex

实时了解业内动态&#xff0c;论文是最好的桥梁&#xff0c;专栏精选论文重点解读热点论文&#xff0c;围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;…
阅读更多...
09. Java ThreadLocal 的使用

09. Java ThreadLocal 的使用

1. 前言 本节内容主要是对 ThreadLocal 进行深入的讲解&#xff0c;具体内容点如下&#xff1a; 了解 ThreadLocal 的诞生&#xff0c;以及总体概括&#xff0c;是学习本节知识的基础&#xff1b;了解 ThreadLocal 的作用&#xff0c;从整体层面理解 ThreadLocal 的程序作用&…
阅读更多...
Vue3基础使用

Vue3基础使用

目录 一、创建Vue3工程 (一)、cli (二)、vite 二、常用Composition API (一)、setup函数 (二)、ref函数 (三)、reactive函数 (四)、setup注意事项 (五)、计算属性 (六)、watch (七)、watchEffect函数 (八)、生命周期 1、以配置项的形式使用生命周期钩子 2、组合式…
阅读更多...
功能测试【测试用例模板、Bug模板、手机App测试★】

功能测试【测试用例模板、Bug模板、手机App测试★】

功能测试 Day01 web项目环境与测试流程、业务流程测试一、【了解】web项目环境说明1.1 环境的定义&#xff1a;项目运行所需要的所有的软件和硬件组合1.2 环境(服务器)的组成&#xff1a;操作系统数据库web应用程序项目代码1.3 面试题&#xff1a;你们公司有几套环境&#xff1…
阅读更多...
昇思25天学习打卡营第2天|快速入门

昇思25天学习打卡营第2天|快速入门

快速入门 操作步骤1.引入依赖包2.下载Mnist数据集3.划分训练集和测试集4.数据预处理5.网络构建6.模型训练7.保存模型8.加载模型9.模型预测 今天通过昇思大模型平台AI实验室提供的在线Jupyter工具&#xff0c;快速入门MindSpore。 目标&#xff1a;通过MindSpore的API快速实现一…
阅读更多...
最新文章

Copyright @ 2022~2023