大家好，我是你的好朋友思创斯。今天说一说微信小程序详细教程（建议收藏）「终于解决」,希望您对编程的造诣更进一步.
1. 小程序的安装与创建
- 第一步 打开小程序
- 第二步 找到开发管理，找到开发设置，下面有一个appid，复制即可，后面开发小程序需要用
- 新建项目 ，需要先下载微信开发工具，安装完成之后进入如下的界面。复制刚才的appid,选择不使用云开发，javascript基础模板，进行创建
- 这样就成功创建了小程序，页面显示如下
2. 小程序的介绍
小程序就是微信里面app，16年推出，它的内存，源码，图片，存储，接口与数据都有限制。在微信自由分享，不用下载app，能快速的开发，使用微信的api接口。竞品：支付宝小程序，钉钉，美团，头条，抖音，qq,小程序等。
- 我们发现小程序的界面主要由一下几部分组成
- 项目的组成主要包括以下内容
- 页面组件pages/home
- home.wxml 模板文件
- home.js业务逻辑
- home.wxss 样式
- home.json 页面配置
-
特别注意勾选⭐⭐ 不检验合法域名
-
小程序的限制
源文件大小 每个包不能超过2m 总共不能超过16-20m页面缓存堆栈5层 底部栏 最少2个最多5个 底部栏图片31k本地存储 1次1m最多100msetdata 不能超过1m功能和微信一致（右上角胶囊按钮，下拉刷新...）
3. 如何新建页面
- 在pages文件夹右键建立新的文件夹
- 在文件中右键新建页面
- ⭐哪个page在最上面，默认显示哪页
- ⭐json要求严格语法，不能有多余的注释和逗号
pages 注册页面 window 窗口信息
4.修改页面默认设置（页面配置）
- 这是页面默认的
- 我们对导航栏背景颜色，标题，文字颜色进行了修改
{
"enablepulldownrefresh": true, 允许下拉刷新
"backgroundtextstyle": "dark",背景文字颜色
"backgroundcolor": "#f70",背景颜色
"navigationbartitletext": "小时讲笑话",
"usingcomponents": {} 组件
}
是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：
【官方授权 正版激活】：
1.小程序的模板语法约等于vue的模板语法
- 文本渲染
{ {msg}}
可以执行简单的js表达式{ {2 3}} { {msg.length}} - 条件渲染
wx:if=""
wx:elif=""
wx:else - 列表渲染
wx:for="{ {list}}"
wx:key="index" { {item}} { {index}} - 自定义列表渲染
定义item与index的名称
wx:for="{ {list}}" wx:for-item="myitem" wx:for-index="myidx" { {myidex}} { {myitem}} - 导入（不常用）
import 只能导入templat内容
<template name="usercart">用户名：{
{
name}} </template>
include 只能导入非template内容
<view>{
{
内容}}</view>
2. 内置组件
（1） view组件 块组件
（2）text组件 行内组件
（3） button组件 按钮
（4） input组件 表单
3. wxss
默认单位是rpx
750rpx等于一个屏幕的宽
375就是50%的宽
4. 事件
-
事件
（1）bindinput 表单输入时
（2）bindconfirm 表单输入确认
（3）bindtap点击时候
-
事件的传参
5. 表单
- 表单的绑定
inputhd(e){ this.setdata({s1:e.detail.value}) }
- 🚩表单的值获取：e.detail.value
6. 内置的api
（1）显示提示showtoast
（2）本地存储wx.setstoragesync(key,value)
（3）本地取 wx.getstoragesync(key)
7. 生命周期
（1）onload页面加载完毕
（2） onpulldownrefresh下拉刷新
（3） onreachbottom触底更新
8.更新数据与视图
this.setdata({k:v})
9. 页面栈
页面栈 a页面 b 页面 c 页面 d 页面 e 页面
通过 open-type = “navigate” 页面会缓存起来 最多缓存5层
a页面->redirect b页面 a页面是不会被缓存
e 页面 “navigateback” 到 d页面 （页面的缓存移除一次）
总结：navigate会增加一层缓存页面
redirect 会替换一层缓存页面
navigateback 会移除一层缓存页面
10. 小程序的页面跳转
（1）组件跳转
url跳转的地址·
open-type 打开类型
navigate普通跳转
redirect跳转并替换
relaunch重启
navigateback返回
(2) api跳转
wx.navigateto跳转
wx.switchtab 切换底部栏
wx.redirect重定向
wx.rel.aunch重启
- 为什么需要封装request
1. 定义baseurl
2. 添加请求头
3. 添加加载提示
4. 同一错误处理
-
初始化 ，进入项目，输入cmd,j进入后输入npm init -y
-
安装通过 npm 安装
npm i @vant/weapp -s –production
3. 删除style:v2
-
修改project.config.js，packnpmmanually改为 true 添加对象
-
点击工具，构建npm ,构建成功会出现
6. 导入组件，使用组件
- 引入,在app.json或index.json中引入组件
"usingcomponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
- 使用插件.通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签
<van-tabs active="a">
<van-tab title="标签 1" name="a">内容 1</van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
以上就是全部内容啦，有点多但是很全， 对你有帮助的话，不要忘了一键三连哦💗
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/129261.html