当前位置:   article > 正文

微信小程序开发(超详细保姆式教程之基本须知)

微信小程序开发

立如芝兰玉树,笑如朗月入怀。——佚名


个人主页  @充电区

点击查看所属专栏 《微信小程序》

【关注+收藏专栏】知识追番,不遗漏 !!!


【没有废话,全是干货!】


一、为什么要做小程序

  1. 用户便捷性:小程序无需下载,用户能够迅速访问内容,提高了用户留存率和使用频率。
  2. 多平台覆盖:小程序能够同时覆盖多个平台,扩大了潜在客户群体,有助于业务增长。
  3. 低成本高效益:小程序相对于传统应用来说成本较低,且能够实现类似功能。这让企业可以更快地回本并获得更高的ROI。
  4. 社交传播:小程序的社交互动功能使得用户更容易分享和推荐,有助于品牌口碑的传播。
  5. 实时更新:企业可以根据市场反馈和需求迅速调整小程序,适应变化的市场环境。

二、准备与基础

API应用程序接口Application Programming Interface

微信小程序是一种运行在微信内部的轻量级的应用程序

小程序特性:无需安装,用完即走,无需卸载,触手可及

小程序开发:访问微信公众平台(https://mp.weixin.qq.com)注册微信小程序账号

申请账号前先准备一个邮箱:

【要求】

1、未被微信公众平台注册

2、未被微信开放平台注册

3、未被个人微信号绑定过(如有可解绑)

获取appID(位置:开发管理-开发设置-开发者ID)

【微信公众平台】

微信开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

【完善小程序账号信息】

项目成员(参与开发,运营,数据分析)和体验成员

开发者ID=APPID+AppSecret

AppID:在微信账号体系内唯一的身份凭证

AppSecret:开发者对小程序拥有所有权的凭证

【微信开发者工具下载】

稳定版:稳定性高,开发中推荐

预发布版:稳定性尚可,一般包含新的,大的特性,通过了内部测试

开发版:稳定性差,主要用于尽快修复缺陷,敏捷上线小

注意事项:微信开发工具必须联网使用!

三、创建小程序项目

在模拟器上查看项目效果

点击编译——看左边页面or预览——放大左边页面看

四、主界面的5个组成部分

五、文件和目录结构的介绍

一个完整的小程序项目分为两个部分:

主体文件(全局文件),作用于整个小程序中,影响小程序的每个页面,主体文件必须放在项目的根目录下

  1. app.js
  2. app.json
  3. app.wxss

注意:主体文件的名字必须是app,且app.js和app.json是必须的

页面文件(存放在pages目录下,一个页面一个文件夹)

每个页面所需的文件

每个页面通常由四个文件组成【每个文件只对当前页面有效】

.js页面逻辑

.wxml页面结构

.wxss页面样式

.json小页面配置

注意:.js和.wxml文件是必须的

更改渲染模式:skyline改为webview渲染模式

将以下选中代码删掉

六、调试器里的面板

Wxml panel

用于帮助开发者开发wxml转化后的界面。在这里可以看到真实的页面结构以及对应的wxss属性,同时可以通过修改对应的wxss属性,在模拟器中实时看到修改情况(仅为实时预览,无法保存到文件)

Console

  1. 开发者在此输入和调试代码
  2. 小程序的错误输出,会显示在此处
  3. 在控制台中可以输入以下命令

build编译小程序

preview预览

upload上传代码

openVendor打开基础库所在目录

openToolsLog打开工具日志目录

checkProxy(url)检查指定url的代理使用情况

系统打印信息

Network

用于观察和显示发送请求(request)和调用文件(socket)的信息和具体情况

Appdata

用于显示当前项目运行时小程序的appdata具体数据,实时反应项目数据情况,可以在此处编辑数据,并及时反馈到界面上

Storage6

数据存储情况,可以直接在storage面板上进行修改、删除、新增

七、工具栏

编译:模拟器刷新

预览:“弹出”二维码,扫描,点击胶囊里三个点,点击底部弹出的开发调试选项,重启,重新扫描二维码

真机调试:与预览的区别,会弹出一个调试器

清缓存

(如果清除后某些错误还存在,点击左上项目,点击重新打开此项目)

 每天学一点,知识不遗漏!


如有错误,还望大佬海涵,不吝指正【抱拳】

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/927972
推荐阅读
相关标签
  

闽ICP备14008679号