Web微信小程序开发（一）

2024-04-02 12:23:07

微信作为一种通讯工具的使用可以说是越来越频繁了，随之兴起的也有很多，比如服务号，小程序，但是似乎小程序更能符合大众的心意，在面临着越来越多的APP的普及，大家更多的是希望手机上的APP能越来越少

所以菜菜就顺应时代的潮流学习如何做一个简单的小程序（嘻嘻嘻）

一、开发环境的准备

首先就是要有自己的权限来开发一个小程序

注册一个属于自己的开发者账号
（由于我们后期需要调用微信端口等功能，即需要一个APPID）
百度微信公众平台-- 注册–登录
要注意的是注册需要一个没有使用过的邮箱（或者在微信小程序官网）

登录之后的界面如图：

点击红色方框中的开发设置
得到如下界面，获取APPID
（可以先提前复制保存，方便后期使用）

到了这里，我们就可以准备我们的微信开发工具了

下载对应工具
写代码：vs code下载地址
看效果：微信开发者工具下载地址

其界面分别为

选择自己的版本下载即可

二、微信开发者工具使用

下载完成之后，打开微信开发者工具，微信扫一扫授权登录得到如下界面

第一个小程序

在桌面建一个文件夹命名为01-demo

注意：
文件夹名称应该与项目名称一致
我使用的语言是Js
可选择使用测试号
再点击新建即可

认识我们的界面

1区域
基本工具栏，对当前工具进行设置，比如改变外观
2区域
显示界面，可在这里看到效果
3区域
文件区，我们需要的所有文件
4区域
代码区，我们在里面进行一系列操作
5区域
调试区，上面的一些选项可点开，看到类似HTML的代码

大家可试着自己各种点击一下了解其功能

（为绿色，表示可见，可自行操作选择自己喜欢的显示方式）

对于小程序模式，普通编译我们一般不改变
编译，预览我想大家都明白
真机调试：对于我们不能在该界面找到的bug，可以通过手机扫描二维码来体验
其余的方框内的内容可自行了解

在对微信小程序的开发中我们对于软件的安装使用有了一定的基础了解了，我们后面就将认真的学习如何开发小程序

第一篇Web微信小程序开发的学习就到此结束啦！

Web微信小程序开发（一）相关推荐

web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
微信小程序开发和网页Web开发的区别
小程序和web开发的区别主要在前端.小程序的主要操作平台在微信上.微信服务器的前端代码和从用户数据库后台传过来的数据,通过微信内置的解释器进行拼接,解释为我们平时看到的页面.Web 开发仍然具有相同的 ...
微信小程序开发笔记（一）微信web开发者工具的下载与安装、AppID的申请
参考教材:<微信小程序开发入门与实践> 雷磊前言微信提供了小程序的官方开发工具-微信开发者工具,当然,这个微信开发者工具还可以用来调试运行在微信上的网页以及微信JS-SDK. 微信开 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
现学现卖微信小程序开发（二）
现学现卖微信小程序开发(一) 现学现卖微信小程序开发(三):引入Rx,为小程序插上翅膀一个Todo应用的小程序版好的,那么下一步我们就先照猫画虎,新建一个todos文件夹,然后一套四样同名文件准备 ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
微信小程序开发（一）
文章目录简介: 小程序和APP的对比小程序与普通网页开发的区别官方文档: 开发工具: 导入项目: 小程序项目的主要目录文件作用简介: 微信小程序,简称小程序,缩写XCX,英文名mini pro ...

最新文章

热门文章