小程序开发第一弹: 微信基础开发
发表时间:2021-1-5
发布人:葵宇科技
浏览次数:31
什么是小程序相信我也不必介绍大家一定都是知道的, 我这里的本意是整理一份小程序的文档, 一方面加深自身的记忆, 另一方面也是官方文档有点多, 不太好熟悉自己找一些感觉自身比较常用的提炼出来方便记忆 ;
搭建环境
注册账号我这里就不说了 直接上链接 微信公众平台 需要注意的是注册账号时记得选择小程序选项 ; 注册成功后会进入一个类似于小程序的后台管理页面 ; 其他的就不说了 建议大家看一遍, 重点在 开发
下一步安装开发工具, 微信小程序开发工具安装及其简单, 这里不描述具体安装步骤 附上地址 大家根据自身的系统自行安装吧
打开咱们刚安装的编辑器 -> 选择小程序 -> 点击 + ; 自行创建项目, 这里的 AppID 就是上面提到的管理后台中开发选项中的AppID 复制即可 ; 这里建议大家先不要选用云开发 后面我会单独开一章说 ;
工具
这里咱们只说一下主体内容, 其余功能自己探索吧 ;
目录结构
├─pages
│ ├─index // 对应每个页面 内部必须包含以下四个文件
│ │ index.js // 页面逻辑
│ │ index.json // 页面配置
│ │ index.wxml // 页面结构
│ │ index.wxss // 页面样式
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
└─utils // 工具类
│ util.js
│ app.js // 描述小程序整体逻辑
│ app.json // 小程序公共配置
│ app.wxss // 小程序公共样式
│ project.config.json // 项目配置文件
│ sitemap.json
/**
* 需要注意的是 page 中4个文件必须同名
**/
复制代码
小程序配置
小程序根目录下的
app.json
文件用来对微信小程序进行全局配置
{
// 配置小程序默认启动页
"entryPagePath": "pages/logs/logs",
// 对应小程序中的每一个页面,如果没有 entryPagePath, pages中的第一项为启动页
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
// 导航栏背景颜色
"navigationBarBackgroundColor": "#ccc",
// 导航栏文字颜色 white black
"navigationBarTextStyle":"white",
// 导航栏文字内容
"navigationBarTitleText": "wx",
// 下拉 loading 样式 dark light; 需要配置下面这个配置才能开启
"backgroundTextStyle": "dark",
// 是否开启全局的下拉刷新
"enablePullDownRefresh": true,
// 导航栏样式 custom, default; custom以上配置全部失效,只保留右上角胶囊, topBar需要自己写样式定义
"navigationStyle": "custom"
},
"tabBar": {
// tabBar 文字颜色
"color": "#444",
// tabBar 文字选中颜色
"selectedColor": "#f1f1f1",
// tabBar 背景颜色
"backgroundColor": "#fff",
// tabBar 上边框颜色
"borderStyle": "#ccc",
// 最多配置5个 tab, 最少2个
"list": [
// 必须在 pages 中存在
"pagePath": "pages/index/index",
// tab 名字
"text": "homePage",
// 建议大小 81*81 不支持网络图片
"iconPath": "",
"selectedIconPath": ""
]
}
}
复制代码
每一个小程序页面也可以使用
.json
文件对本页面的窗口表现进行配置 页面配置项会覆盖app.json
的window
中相同的配置项页面配置
WXML 语法
数据绑定
WXML 中的动态数据均来自对应 Page 的 data ; 数据绑定使用双大括号语法 与 Vue 基本一致 , 但是也有些许不同 , 简单总结一下就是小程序中的 页面里面所有的表达式都应在
{{}}
内部去做
<view>{{ message }}view>
<view class="item-{{ id }}">view>
复制代码
Page({
data: {
message: "hello world",
id: 123
}
})
复制代码
列表渲染
<view wx:for="{{ list }}" wx:key="{{ index }}">
<text>{{ item.uname }} -- {{ item.uage }}text>
view>
复制代码
Page({
data: {
list: [
{ uname: 'zs', uage: 23 },
{ uname: 'ls', uage: 24 },
{ uname: 'we', uage: 25 },
{ uname: 'mz', uage: 26 }
]
}
})
复制代码
条件渲染
<view wx:if="{{ isShow }}">是否渲染view>
<view wx:elif="{{ !isShow }}">分支判断view>
<view wx:else>否则view>
复制代码
WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式 ; WXSS 具有 CSS 的大部分特性 , 为了更适合小程序开发 , 对 CSS 也做了对应的扩充和修改 尺寸单位(rpx) 样式导入(@import)
生命周期
小程序的生命周期分为三种, 分别是
app
page
component
这里咱们只说一下前面的两种
App
onLaunch
: 监听小程序初始化onShow
: 小程序启动时和后台切回前台的时候被调用onHide
: 小程序切入到后台时调用
App({
onLaunch() {
console.log('onLaunch...');
},
onShow() {
console.log('onShow...');
},
onHide() {
console.log('onHide...');
}
})
复制代码
Page
onLoad
: 页面加载时触发 , 一个页面只会调用一次 , 可以在 onLoad 的参数中获取当前打开页面所携带的参数onShow
: 页面显示时和切入前台时被调用onReady
: 页面初次渲染完成时触发只调用一次 类似于 vue 中的Mounted
onHide
: 页面隐藏和切入后台时调用, 如wx.navgationTo
或 tab 切换onUnload
: 页面卸载时触发 , 如wx.redirectTo
或wx.navigationBack
到其他页面时
Page({
// 默认获取到的是空对象, 如果传递有参数就是参数对象
onLoad(params) {
console.log(params);
},
onShow() {
console.log('page--onShow...');
},
onReady() {
console.log('page--onReady...');
},
onHide() {
console.log('page--onHide...');
},
onUnload() {
console.log('page--onUnload...');
}
})
复制代码
App 和 Page 之间的顺序为
启动时 : App
onLaunch
onShow
PageonLoad
onShow
onReady
切后台 : Page
onHide
ApponHide
切前台 : App
onShow
PageonShow
事件
相信看这个文章的人都是能够使用 JavaScript 的 ; 所以 js 就不说了 简单说一下事件吧 , 内容也比较多
<button type="primary" bindtap="clickMe">click mebutton>
复制代码
Page({
clickMe(event) {
console.log(event)
}
})
复制代码
组件
个人理解这个组件可以理解为微信又基于一些HTML做了二次封装 ; 这里内容比较多, 但是大部分都不是很难 , 直接放链接吧 , 建议文档反复观看并实践
API
微信提供的接口还是比较多的 这里也不说了 详情看这里