小白也能上手的微信小程序开发
小白也能上手的微信小程序开发
原创 Theone666 码show
2025年01月24日 23:19 广东
这是一篇介绍原生微信小程序开发的文章。
- 小程序是什么?
微信小程序是一种在微信上用完即走,不需要安装的应用程序。
文档地址:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.下载并安装开发者工具,需要微信扫码登录开发者工具
图片
3. 登录小程序账号后,找到“开发管理”
图片
可以复制“AppID(小程序ID)”, 上传发布需要用到~~
图片
按照惯例这几天都会有红包封面领,这一次发放300个免费红包封面,关注“公众号”可领取,先到先得哦~~~
接下来我们学习微信小程序开发了。。。。
- 微信小程序项目结构
图片
图片
图片
2. 全局配置文件 (app.json)
图片
图片
"tabBar": {
"selectedColor": "#FF9000",
"color": "#bfbfbf",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/i_home.png",
"selectedIconPath": "assets/i_home_on.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "assets/i_search.png",
"selectedIconPath": "assets/i_search_on.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "assets/i_my.png",
"selectedIconPath": "assets/i_my_on.png"
}
]
},
- 路由 (创建页面、跳转页面、处理URL参数等)
app.json
{
"pages": [
"pages/index/index",
"pages/my/my",
"pages/search/search",
"pages/detail/detail",
"pages/logs/logs"
],
}
index.wxml
index.js
// 通过编程式导航跳转到tabBar对应的页面
jumpToSearch(){
// 通过全局对象的方式携带参数
let globalData = getApp()
globalData.rid = 33;
wx.switchTab({
url: '../search/search',
})
}
- 模板语法 {{ }} 条件渲染、列表渲染
pages/index/index.js (脚本)
// 添加数据
data: {
num: 1000
},
pages/index/index.wxml(结构)
列表渲染 (结构)
结构
脚本
Page({
data: {
num: 1
},
// tab选项卡方法
changeTab(event){
console.log(event.currentTarget.dataset)
// 赋值给num属性
// 小程序中不是this.data.num = 值
// 是通过this.setData() 方法进行赋值
let index = event.currentTarget.dataset.index;
this.setData({
num: index
})
}
})
- 网络请求 (wx.request)
首先可以设置合法域名
图片
本地开发时,勾选“不校验合法域名”
图片
api/http.js
const host_url = 'http://47.92.204.130:3000';
// 封装网络请求接口
export const bannerListApi = (data) => {
return new Promise((resolve, reject) => {
// 通过wx对象调用request方法发起请求
wx.request({
url: ${host_url}/api/banner/list
,
method: 'get',
data: data,
success(response) {
// 请求成功
resolve(response.data)
},
fail(err) {
// 请求失败
reject(err)
}
})
})
}
pages/banner/banner.js
// 导入封装好的API
import { bannerListApi } from '../../api/http'
Page({
data: {
arr:[],
},
// 监听页面是否显示
async onShow(){
// 初始化
await bannerListApi({page:1,pageSize:5})
.then(
data=>{
console.log("后台数据:",data);
//解构赋值
let {code , result} = data;
if(code == 200) {
// 赋值
this.setData({
arr: result
})
}
}
)
},
})
- 微信小程序云开发
图片
7.1 开通微信云开发环境
图片
图片
图片
7.2 可以新建文件夹存放云函数
图片
project.config.json
"cloudfunctionRoot": "clouds/",
图片
图片
7.3 初始化云开发环境
图片
app.js
// app.js
App({
onLaunch() {
// 初始化函数
wx.cloud.init({
// 环境ID
env: 'wang2023-5gng88vf3d3ea81f'
})
}
})
7.4 云函数
图片
图片
clouds/getUserOpenid/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
// 初始化使用当前云环境
cloud.init({ env: 'wang2023-5gng88vf3d3ea81f' })
// 云函数入口函数
exports.main = async (event, context) => {
// 云服务对象
const wxContext = cloud.getWXContext()
// 前端提交的参数会在这个event对象中
return {
code: 200,
msg: "获取用户openid成功。",
message: event.message,
openid: wxContext.OPENID,// 代表用户唯一性的标记
}
}
pages/index/index.js
Page({
// 获取用户的身份 (调用云函数)
getOpenIdFn(){
let _this = this;
// 表示调用云函数
wx.cloud.callFunction({
name: 'getUserOpenId',
data: {
message: "这是一段刻骨铭心的的记忆。"
},
success(content){
// console.log("云函数返回的结果",content)
let {result,errMsg} = content;
if(errMsg === "cloud.callFunction:ok") {
console.log(result)
let {openid , code} = result;
//记录用户的身份
if(code == 200) {
_this.setData({
openid
})
}
}
}
})
},
})
7.5 云数据库
page/index/index.js
// 链接云数据库
const db = wx.cloud.database({
env: "wang2023-5gng88vf3d3ea81f"
})
Page({
// 添加数据到云数据库(调用云数据库)
async addUserInfo(name,openid){
// 提示
wx.showLoading({
title: '正在执行',
})
await db.collection('db_demo_table')
.add({
data: {
name,
openid
}
}).then(
content=>{
console.log("云数据库插入数据的结果:",content)
let {errMsg} = content;
if(errMsg == "collection.add:ok"){
wx.showToast({
title: '添加数据成功',
})
}
}
)
wx.hideLoading();
},
})
- weapp 组件库的使用
文档地址:
https://vant-ui.github.io/vant-weapp/#/home
初始化
npm init -y
通过 npm 安装
npm i @vant/weapp -S --production
图片
图片
图片
图片
如果遇到问题,使用不了组件库,可以上网搜一下~~
图片
总结
-
做任何应用程序,首先学会写界面(结构 + 外观)
-
用户与界面的交互行为(下拉刷新,触底加载等)
-
如何把数据动态渲染出来 {{}} 条件渲染 列表渲染
-
掌握api的使用,例如:wx 对象提供的网络请求、弹窗)
-
小程序云服务(云函数、云数据库、云存储)
-
组件、组件库
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!