小白也能上手的微信小程序开发

小白也能上手的微信小程序开发
原创 Theone666 码show
2025年01月24日 23:19 广东
这是一篇介绍原生微信小程序开发的文章。

  1. 小程序是什么?

微信小程序是一种在微信上用完即走,不需要安装的应用程序。

文档地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.下载并安装开发者工具,需要微信扫码登录开发者工具

图片
3. 登录小程序账号后,找到“开发管理”

图片
可以复制“AppID(小程序ID)”, 上传发布需要用到~~
图片
按照惯例这几天都会有红包封面领,这一次发放300个免费红包封面,关注“公众号”可领取,先到先得哦~~~

接下来我们学习微信小程序开发了。。。。

  1. 微信小程序项目结构

图片
图片
图片
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"
}
]
},

  1. 路由 (创建页面、跳转页面、处理URL参数等)

app.json

{
"pages": [
"pages/index/index",
"pages/my/my",
"pages/search/search",
"pages/detail/detail",
"pages/logs/logs"
],
}

index.wxml

跳转详情页111

跳转详情页222
跳转详情页333

index.js

// 通过编程式导航跳转到tabBar对应的页面
jumpToSearch(){
// 通过全局对象的方式携带参数
let globalData = getApp()
globalData.rid = 33;
wx.switchTab({
url: '../search/search',
})
}

  1. 模板语法 {{ }} 条件渲染、列表渲染

pages/index/index.js (脚本)

// 添加数据
data: {
num: 1000
},

pages/index/index.wxml(结构)

{{num}} 大于50~~ {{num}} 不大于50!

列表渲染 (结构)

{{index }} {{item.name}} {{i}} {{j}} 5. 事件交互,采集表单信息

结构

选项{{item}}

脚本

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
})
}
})

  1. 网络请求 (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
})
}
}
)
},
})

  1. 微信小程序云开发

图片
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();
},
})

  1. weapp 组件库的使用

文档地址:

https://vant-ui.github.io/vant-weapp/#/home

初始化
npm init -y
通过 npm 安装
npm i @vant/weapp -S --production

图片
图片
图片
图片
如果遇到问题,使用不了组件库,可以上网搜一下~~

图片
总结

  1. 做任何应用程序,首先学会写界面(结构 + 外观)

  2. 用户与界面的交互行为(下拉刷新,触底加载等)

  3. 如何把数据动态渲染出来 {{}} 条件渲染 列表渲染

  4. 掌握api的使用,例如:wx 对象提供的网络请求、弹窗)

  5. 小程序云服务(云函数、云数据库、云存储)

  6. 组件、组件库

posted @   软件工匠  阅读(2)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示