文章目录
更多相关内容可查看
前期准备
要有前端开发基础,已安装NodeJS,若未安装请参考NodeJS安装并生成Vue脚手架(保姆级)
可参考小程序开发官方文档进行学习,本文也是参考官方文档总结而来
附Demo地址:https://gitee.com/its-a-little-bad/wechat-d.git
注册登陆
已经注册过的可以跳过这部分,进入微信公众平台注册,选择小程序即可
进行邮箱注册以及一系列的信息填入,这里选择个人,即可注册完成
下载安装
根据自己的操作系统下载对应的安装包进行安装即可(我的是64位):微信开发者工具下载地址
下载完安装包双击解压无脑下一步即可,微信扫码打开,即可进入如下页面
创建项目
进入刚才注册页面,找到对应的AppID
点击+号创建项目,填入自己的AppID即可,点击确定
如下页面为已创建好的小程序,点击编译即可在左侧预览界面看到界面
如果大家看着别扭,这里有个小技巧可以把预览界面放到右边,视图--外观--将模拟器移到右侧
项目结构
一个pages相当于一个页面,一个页面有如下四个文件
- .json 后缀的 JSON 配置文件,静态配置
- .wxml 后缀的 WXML 模板文件,类似于html文件
- .wxss 后缀的 WXSS 样式文件,类似于css文件
- .js 后缀的 JS 脚本逻辑文件,js文件,写逻辑的
这里就不具体展开去描述了,有vue的基础应该能大概明白每个文件的作用
├── app.js # 小程序的逻辑文件
├── app.json # 小程序的配置文件
├── app.wxss # 全局公共样式文件
├── pages # 存放小程序的各个页面
│ ├── index # index页面
│ │ ├── index.js # 页面逻辑
│ │ ├── index.wxml # 页面结构
│ │ └── index.wxss # 页面样式表
│ └── logs # logs页面
│ ├── logs.js # 页面逻辑
│ ├── logs.json # 页面配置
│ ├── logs.wxml # 页面结构
│ └── logs.wxss # 页面样式表
├── project.config.json
└── utils
└── util.js
版本管理
我这里因为是自己私下玩,还是用的git去管理的
- 在命令窗口中输入:git init
- 在命令窗口中输入:git remote add origin 你的仓库地址
- 在命令窗口中输入:git pull origin master
- 在命令窗口中输入:git add .
- 在命令窗口中输入:git commit -m “提交项目”
- 在命令窗口中输入:git push origin master
在版本管理可查看对应信息
程序页面
微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
这个配置说明项目定义了两个页面,分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。
小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
你可以观察到 pages/logs/logs 下其实是包括了4种文件的,微信客户端会先根据logs.json
配置生成一个界面,顶部的颜色和文字
你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式
。最后客户端会装载 logs.js
,你可以看到 logs.js 的大体内容就是:
Page({
data: { // 参与页面渲染的数据
logs: []
},
onl oad: function () {
// 页面渲染后 执行
}
})
Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。
在渲染完界面之后,页面实例就会收到一个 onl oad 的回调,你可以在这个回调处理你的逻辑。
简单示例
<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
}
// Register a Page.
Page({
data: helloData,
changeName: function (e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})
看这个代码其实是跟vue2很类似的,而且也能很直观的在编辑器中看到想要的效果
生命周期
以下为常用的app.js的生命周期
属性 | 类型 | 说明 |
---|---|---|
onLaunch | function | 生命周期回调——监听小程序初始化 |
onShow | function | 生命周期回调——监听小程序启动或切前台 |
onHide | function | 生命周期回调——监听小程序切后台 |
onError | function | 错误监听函数 |
onPageNotFound | function | 页面不存在监听函数 |
onUnhandledRejection | function | 未处理的 Promise 拒绝事件监听函数 |
onThemeChange | function | 监听系统主题变化 |
其他 | any | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 |
新增页面
这里带大家一起创建一个页面,也为了大家在后续的开发里更好的下手
1.进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建,我这里把我新建的login页面放到最前面来演示
2.给小程序当前页面设置导航栏(index.json为例:修改背景,字体颜色)
{
"usingComponents": {},
"navigationBarBackgroundColor": "#000000", //修改背景为黑色
"navigationBarTextStyle": "white", //修改字体为白色
"navigationBarTitleText": "登陆页面", //修改标题
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
若导航栏不显示,检查一下app.json是否隐藏了标题栏如下,改为"navigationStyle": "default"
即可
注意:如果你想要显示导航栏,你可以尝试以下两种解决方案
- 更改app.json的”renderer”的值。如果你的应用不需要使用
”skyline”渲染器
,你可以将其更改为其他值,或者完全删除”renderer”选项。然后,你可以将”navigationStyle”设置为”default”
,以显示默认的导航栏。 - 使用自定义导航栏。如果你的应用必须使用”skyline”渲染器,那么你需要创建一个
自定义导航栏
。你可以在页面的.wxml文件中添加一个自定义的组件,然后在.wxss文件中为它添加样式。这样,虽然你不能使用默认的导航栏,但你可以创建一个看起来和默认导航栏非常相似的自定义导航栏。
3.给小程序设置拖把栏(全局配置)
记得照片自己导入一下哦,导入到你自己写的路径下就行
代码如下:
{
"pages": [
"pages/login/login",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "default"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabBar/1.png",
"selectedIconPath": "static/tabBar/2.png"
},
{
"pagePath": "pages/login/login",
"text": "登录",
"iconPath": "static/tabBar/2.png",
"selectedIconPath": "static/tabBar/1.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "static/tabBar/3.png",
"selectedIconPath": "static/tabBar/2.png"
}
]
},
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
4. 给小程序设置按钮触摸事件(index.wxml为例)
wxml文件
<view class="btn" bindtap="handleCm">
<image src="/static/tabBar/1.png" class="btn-icon" />
<text>点击事件</text>
</view>
wxss文件
.btn {
display: flex;
align-items: center;
justify-content: center;
background-color: #1aad19;
color: white;
padding: 10px;
border-radius: 4px;
}
.btn-icon {
width: 40px;
height: 40px;
margin-right: 10px;
}
js文件
//自定义点击事件
handleCm(){
this.setData({
motto: "唱跳Rap"
})
}
功能:点击按钮会将HelloWorld变为唱跳Rap
功能实现
如果你是拉取的Demo代码,记得自己往static/images中导入图片
功能:要求输入一串1010110110011(二进制)可以解析成汉字
1. 设计界面
首先,在微信小程序的 wxml 文件中设计一个界面,包括输入框用于输入二进制数字和一个按钮来触发解析操作。例如:
<!-- index.wxml -->
<!-- index.wxml -->
<view class="container">
<view class="navigation-bar">
<!-- 导航栏的内容 -->
<text class="navbar-title">美化页面</text>
</view>
<view class="swiper-container">
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="input-container">
<input class="input" placeholder="请输入二进制数字" bindinput="inputChange" />
<button class="button" bindtap="parseBinary">解析成汉字</button>
</view>
<view class="result">{{ result }}</view>
</view>
2. 编写逻辑处理的 JavaScript 代码
在 js 文件中编写逻辑代码,包括处理用户输入和二进制解析的功能。
// index.js
Page({
data: {
imgUrls: [
'/static/images/a.png',
'/static/images/b.png',
'/static/images/c.png'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
binaryInput: '', // 用户输入的二进制字符串
result: '', // 解析后的汉字结果
},
// 输入框内容改变时触发
inputChange: function(e) {
this.setData({
binaryInput: e.detail.value.trim(), // 获取用户输入并去除首尾空格
});
},
// 解析二进制为汉字
parseBinary: function() {
let binaryInput = this.data.binaryInput;
// 检查输入是否为合法的二进制字符串(只包含 0 和 1)
if (!/^[01]+$/.test(binaryInput)) {
wx.showToast({
title: '请输入有效的二进制数字',
icon: 'none',
duration: 2000
});
return;
}
// 调用解析函数,这里假设有一个 parseBinaryToChinese 的函数来实现解析
let result = parseBinaryToChinese(binaryInput);
console.log('aaaaa');
// 更新页面显示结果
this.setData({
result: result,
});
console.log('bbbb');
}
});
// 解析二进制字符串为汉字的函数
function parseBinaryToChinese(binaryString) {
// 拆分成每8位一组
let chunks = binaryString.match(/.{8}/g);
// 将每组二进制转换成十进制数再转换成字符
let result = chunks.map(chunk => String.fromCharCode(parseInt(chunk, 2))).join('');
return result;
}
3. CSS 样式(可选)
根据需要可以添加样式来美化界面,例如在 wxss 文件中:
/* index.wxss */
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh; /* 设置容器高度为整个视口高度,确保页面铺满 */
}
.navigation-bar {
width: 100%;
background-color: #333; /* 导航栏背景色 */
color: #fff; /* 导航栏文字颜色 */
text-align: center;
position: fixed; /* 导航栏固定在页面顶部 */
top: 0;
z-index: 1000; /* 确保导航栏在页面顶部 */
}
.swiper-container {
width: 100%;
overflow: hidden;
margin-top: 0; /* 取消轮播图容器的顶部间距 */
}
.swiper {
width: 100%;
height: 200px; /* 调整轮播图高度 */
}
.slide-image {
width: 100%;
height: 100%;
border-radius: 10px;
}
.result {
margin-top: 20px; /* 调整结果显示区域与输入框区域的间距 */
text-align: center;
}
.input-container {
width: 80%;
display: flex;
margin-top: 20px;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.input {
width: 100%;
height: 40px;
margin-bottom: 10px;
font-size: 14px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.button {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #1aad19;
color: #fff;
font-size: 16px;
text-align: center;
border-radius: 5px;
}
效果如图,如果有别的算法需求,换一下如图这个function即可,然后在优化一下页面
本篇小结
本篇带大家从下载安装到简单的玩耍,相信大家看着文档或者当今发达的gpt已经可以开始开发自己的页面了,比如实现一些轮播图,进行微信扫码等等功能都是开箱即用的内容,具体语法千千万,想用什么实现什么页面还需仔细阅读官方文档
标签:index,logs,微信,程序开发,程序,js,源码,pages,页面 From: https://blog.csdn.net/Aaaaaaatwl/article/details/140634229