微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)

简介: 微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

1.创建微信小程序项目

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

1.获取 小程序id

  • 小程序后台–》开发–》开发管理–》开发设置–》开发者ID
  • AppID(小程序ID) wxxxxxxxxxxxf


2.下载微信开发者工具–》这个工具必须联网才能使用

  • 下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.一路下一步安装–》桌面有个快捷方式

  • 微信开发者工具就等同于 pycharm

选择安装目录


安装完成,会生成桌面图标

1.2 创建项目

1.双击 微信开发者工具

2.微信扫码–》登录

扫码登录成功

3.创建项目

  • 点加号创建项目
  • 填写名字
  • 路径
  • APPID
  • 不使用云开发【使用腾讯云的云函数,服务器等等,需要花钱】
  • 不使用模版
  • 可以选择js基础版–》别的别选了
    - JS:咱们不会
    - 其他模版功能比较复杂对新手不友好

点确定

4.基础设置

  • 设置–》编辑器设置–》改变字体大小
  • 视图–》外观–》移动模拟器位置
  • 可以勾选掉不显示:模拟器,调试器等

1.3 本地开发支持http

本地开发–》使用django写后端

  • django运行在 0.0.0.0:8000 地址
  • 微信小程序才能通过ip地址访问到我们的django项目的接口
  • 微信小程序默认不支持http–》django运行在http上–》修改一下–》微信小程序配置
  • 让小程序支持 http请求
  • 右上角–》详情–》本地设置–》不校验合法域名

2.项目目录结构

2.1 项目目录结构

2.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.其他的不重要


├── 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 【微信收录页面,用于搜索,上线后,搜索关键字就可以搜到我们】

2.1.2 配置文件

2.1.2.1 项目配置app.json

1.小程序全局配置文件,用于配置小程序的一些全局属性和页面路由,默认标题,顶部颜色,是否有下拉刷新。。

2.配置参考地址

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

9c306780b7144035a6973b7d633138c1.png


3.部分参数演示

entryPagePath:小程序默认启动首页

pages: 小程序总共有多少个页面

2.1.2.2 页面配置 xx.json

1.小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式、页面标题等

2.app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 xx.json 文件来对本页面的表现进行配置。

3.页面中配置项在当前页面会覆盖 app.json 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段),具体的取值和含义可参考全局配置文档中说明

4.参考文档:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

d0310fe918754ee984d7af7d49611fcf.png

5.常用的

navigationBarBackgroundColor # 导航栏背景颜色,如 #000000

navigationBarTextStyle # 导航栏标题、状态栏颜色,仅支持 black / white

navigationBarTitleText # 导航栏标题文字内容

2.1.2.3 整个项目配置文件

1.project.config.json project.private.config.json

project.config.json 和右上角详情里面的设置是联动的

952668786931449a821a68d18351690e.png

2.小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置

3.project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段

4.参照文档

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

2.1.2.4 搜索相关配置(seo)

1.作用

微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。

爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中

2.参考文档

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

4deab807a05242f799a8f580586bba7b.png

3.配置–》以后用户搜索小程序,任意页面有关键字,都会被搜索到

{

“desc”: “关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html”,

“rules”: [{

“action”: “allow”,

“page”: “*”

}]

}


微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二):https://developer.aliyun.com/article/1497344

相关文章
|
4天前
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
13天前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
6天前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
33 0
【微信小程序开发实战项目】——个人中心页面的制作
|
6天前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
33 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
9天前
|
小程序 BI
水滴筹小程序设计开发:打造公正透明的社会援助体系
随着互联网的快速发展,移动支付和线上服务逐渐成为人们日常生活的一部分。在这种背景下,医疗众筹平台应运而生,为大众提供了筹款、互助、公益的新渠道。水滴筹小程序的诞生,与中国的互联网环境紧密相连。
|
9天前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。
|
13天前
|
小程序 安全 数据安全/隐私保护
理发店预约小程序开发:随时随地,省时省力
理发店预约小程序开发要点:集成预约系统,用户填写信息并自动匹配时间及理发师;包含充值功能,支持安全支付及多种折扣;用户评价系统确保服务质量透明;发型展示帮助用户选择,支持模拟试戴;重视用户体验,界面友好,加载速度快;确保数据安全,兼容多平台,定期更新以优化性能和响应用户需求。寻求开发合作可联系相关人员。
|
13天前
|
人工智能 小程序 搜索推荐
餐饮类小程序开发定制需要多少钱,费用是怎样的
餐饮小程序开发费用因需求、规模和复杂性而异。基础版约几千到万元,含菜品展示、在线点餐等功能;界面设计费几千到几万;服务器租赁年费几千到几万;维护更新费同水平。总成本通常在几万到几十万之间。选择开发商时要考虑实际需求、合同条款及付款方式。
|
4天前
|
小程序 安全 搜索推荐
广州生鲜超市小程序开发:改善生鲜业的用户体验
【摘要】广州生鲜超市小程序提供商品展示搜索、在线购买支付、订单管理、优惠活动及会员系统,实时库存更新、配送追踪、售后评价和客服支持。开发涉及市场调研、设计、技术选型、开发、测试及上线。寻求开发合作可联系相关软件服务商。
|
13天前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
21 0

热门文章

最新文章