文章目录
快速入门微信小程序
1、微信小程序的注册
1.1 注册账户
1.2 激活
1.3 登记信息
注意: 需要使用你的微信进行管理员身份验证
1.4 下载微信开发工具
安装微信开发工具, 下一步下一步就可以了:
1.5 使用微信开发工具创建一个小程序
先在电脑硬盘上,创建一个文件夹: 比如
双击运行微信开发工具,首次打开需要使用微信扫描登录:
扫描成功之后,进入到下面界面
进入到开发主界面:
我们来看一下微信小程序的项目结构:
|---pages/ .....................................页面目录
|---index/ .....................................index页面
|---index.js .....................................index页面js代码
|---index.json .....................................index页面配置
|---index.wxml .....................................index页面结构
|---index.wxss .....................................index页面样式
|---logs/ ....................................logs页面
|---logs.js .....................................logs页面js代码
|---logs.json .....................................logs页面配置
|---logs.wxml .....................................logs页面结构
|---logs.wxss .....................................logs页面样式
|---utils/ .....................................工具脚本目录
|---utils.js .....................................工具脚本
|---.eslintrc.js .....................................代码检测
|---app.js .....................................应用程序js代码
|---app.json .....................................应用程序配置
|---app.wxss .....................................应用程序公共样式
|---project.config.json .....................................项目配置文件
|---project.private.config.json .....................................项目个人配置文件
|---sitemap.json .....................................配置小程序及其页面是否允许被微信索引
安装好开发工具之后,我们来打开工具,看看它跟我们平时用的工具有何异同
第一次打开会让你扫码登录进入到下面这个界面(如果你不扫码的话则是以游客身份进来的。登录进来和游客进来的区别会在创建小程序填写信息时的AppID体现【游客是固定的一个id,登陆者是使用自己的id】)。
可以看到,主界面大致分为了四大部分。如果不习惯深色背景的同学,我们可以通过设置,让它变成浅色背景哈。
这些结构文件的逻辑就是和前端pc端差不多:wxml负责结构展示,wxss负责外观美化,json里面负责数据,js负责逻辑。
2、导入官方的Demo
2.1 下载官方Demo
首先到小程序官网首页 https://mp.weixin.qq.com/cgi-bin/wx?lang=zh_CN 把官方demo下载下来,看图
2.2 导入官方Demo
下载好了之后,解压缩
备注:cloudfunctions是存放云函数的,miniprogram是存放小程序文件的
然后用开发者工具给打开。
2.3 运行官方Demo
进入解压好后的官方Demo目录(这里也可以在微信开发者工具的终端页面中进行):
进入Doc窗口后输入npm run init
,之后使用cd
进入miniprogram
,执行npm i
期间遇到bug1
之后重新打开微信开发者工具
3、编写自己的Demo
3.1 创建微信小程序
详情可以参考上面的1.5
进入微信开发者工具,新建项目:
创建小程序:
3.2 微信小程序常见参数介绍
可以参考前面的1.5小节的项目结构介绍
具体和Vue特别想,如果你学习过Vue的话,再来学这个微信小程序会很快O(∩_∩)O
pages
和tabBar
介绍:
3.3 编写微信小程序
-
Step1:创建一个页面
pages目录下的文件代表一个页面
-
Step2:编写页面结构
PS:可以把这个index.wxml当成index.html
<!--index.wxml--> <view class="container"> <block class="title">Hello World!</block> <button class="bt" bindtap="clickButton">按钮</button> {{count}} {{content}} </view>
-
Step2:编写页面样式
PS:可以index.wxss当成index.css
/*从demo01-wxcss文件中导入index.wxss样式*/ @import"../demo01-wxcss/index.wxss"; /*编写样式*/ .bt{ color: red; background: green; }
-
Step3:编写页面js文件
// pages/demo01/index.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { count:1, content:'我是demo01文件中的数据' }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log("页面加载函数执行了") /*将app.js文件中的content变量 替换掉 demo01目录下 index.js 文件中的content变量*/ this.setData({ content:app.content }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { }, /** * 用户点击按钮 */ clickButton:function(){ this.setData({ count: this.data.count+1 }) console.log("事件触发了") wx.showModal({ title: '提示', content: '这是一个模态弹窗', success (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } })
遇到的Bug
-
bug1:执行
npm run init
报错问题背景:
在下载完官方的Demo后,解压进入Demo文件根目录,然后按照官方文档输入
npm run init
直接报如下错误问题原因:在 npm 7 之前的版本中,当安装依赖包时,会考虑处理 peer dependency(对等依赖)冲突的算法。peer dependency 是指一个包依赖的另一个包的特定版本范围。然而,在某些情况下,peer dependency 冲突的解决可能会引发错误或意外行为。为了解决这个问题,npm 7 引入了一个新的算法来解决 peer dependency 冲突。如果你在使用 npm 7 版本或更高版本时遇到 peer dependency 冲突的问题,你可以通过在 npm 命令后面添加
--legacy-peer-deps
选项来使用旧的 peer dependency 解决算法。这个选项告诉 npm 使用传统的方式来解析 peer dependency 冲突。需要注意的是,使用
--legacy-peer-deps
可能会导致不正确或潜在损坏的依赖解析,因此建议在使用这个选项之前仔细考虑,并尝试其他解决方法。问题解决:将
npm run init
换成npm run init --legacy-peer-deps
参考资料:npm run init 就报错 · Issue #60 · wechat-miniprogram/miniprogram-demo · GitHub