手把手教小白微信小程序开发（超详细保姆式教程）

注册：微信公众平台 -> 立即注册 ->小程序

AppID(小程序ID) wx05c13b331acc9d01

AppSecret(小程序密钥) 4f8232c7bbd4801e58a166d72e92e529

安装 微信开发者工具 ，扫描就可以登录

设置：右上角设置 ->外观浅色，代理，不使用任何代理

创建微信小程序，填就完事了

小程序主界面5个部分，菜单栏，工具栏，模拟器，代码编辑器，调试器

帮助->开发者文档

pages用来存放所有小程序页面

utils用来存放工具性质模块

app.js入口文件，app.json全局配置文件，app.wxss全局样式

project.config.json项目配置文件，setting编译相关配置，appid,小程序的账号ID

sitemap.json是否允许被微信索引

每个页面由4个，.js脚本，.json配置，.wxml模板结构，.wxss样式表文件

app.js中：pages:页面路径，window:页面背景色，文字样式表，style:全局样式，sitemapLocation指明路径

新建小程序页面：在app.json中添加存放路径，自动会创建页面文件

wxss增加rpx尺寸单位，app.wxss是全局样式

常用的视图类组件：view类似于div用来布局,scroll-view 可滚动的视图区域,swiper和swiper-item.轮播图和轮播项

数字经济，区块链，chatgpt.先选赛道

text,长按复制。

text-rich,显示后端传来的html

button,按钮组件

image,图片组件

navigator,导航

事件监听API,on开头，wx.onWindowResize（function callback）

同步API,Sync开头

异步API,类似于$.ajax(options),通过success,fail,complete接收调用结果，wx.request()发起网络数据请求。

协同开发，员工权限进行边界的划分。

事件对象属性列表

type事件类型，timeStamp页面打开到触发事件所经过的毫秒数，target触发事件的组件的一些属性值集合，

currentTarget当前组件属性值集合，detail额外的信息，touches触摸事件，changedTouches触摸事件，当前变化的触摸信息的数组

重设值：

btnChangeCount(){ this.setData({ count: this.data.count+1 }) }

事件传参

<button type="primary" bindtap="btnTap2" data-info="{{3}}">+2</button> btnTap2(e){ console.log(e); console.log(e.target.dataset.info); }

if和block

<view wx:if="{{type===1}}">男</view> <view wx:elif="{{type===2}}">女</view> <view wx:else>保密</view> <block wx:if="{{false}}"> <view>view1</view> <view>view2</view> </block> <view hidden="{{false}}">隐藏</view> <view wx:for="{{arr1}}"> 索引是：{{index}},item项是：{{item}} </view>

wxss中，rpx尺寸单位，@import样式导入

rpx:解决屏幕适配的尺寸单位，宽度等分为750份，较小设备上宽度小，较大则宽度大。

@import "common.wxss";导入外联样式表

全局样式：app.wxss,局部样式优先于全局样式

全局配置：app.json

pages页面存放路径，

window全局设置小窗口外观，导航栏区域，背景区域，页面主体区域。

navigationBarTitleText导航栏文本，navigationBarBackgroundColor导航栏背景颜色，navigationBarTextStyle标题颜色可选黑白，

开启下拉刷新，"enablePullDownRefresh": true，backgroundColor下拉时背景色，backgroundTextStyle下拉刷新小圆点颜色，

onReachBottomDistance下拉触底默认50px可自由设置

tabBar设置小程序底部tabBar效果

底部和顶部，最少2个，最多5个，顶部不显示icon只显示文本。

style是否启用组件样式

本地生活案例

D:\主流技术\黑马程序员\微信小程序\day02\local_life

问题：页面顶部覆盖

九宫格布局：

<!-- 九宫格区域 --> <view class="grid-list"> <view class="grid-item" wx:for="{{gridList}}" wx:key="id"> <image src="{{item.icon}}" mode=""/> <text>{{item.name}}</text> </view> </view>

gridList:[ { id: 1,icon: '/images/swiper/1.jpg',name:'美食'}, { id: 2,icon: '/images/swiper/2.jpg',name:'美食'}, { id: 3,icon: '/images/swiper/3.jpg',name:'美食'}, { id: 4,icon: '/images/swiper/1.jpg',name:'美食'}, { id: 5,icon: '/images/swiper/2.jpg',name:'美食'}, { id: 6,icon: '/images/swiper/3.jpg',name:'美食'}, { id: 7,icon: '/images/swiper/1.jpg',name:'美食'}, { id: 8,icon: '/images/swiper/2.jpg',name:'美食'}, { id: 9,icon: '/images/swiper/3.jpg',name:'美食'} ]

.grid-list { display: flex; flex-wrap: wrap; border-left: 1rpx solid #efefef; border-top: 1rpx solid #efefef; } .grid-item { width: 33.33%; height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1rpx solid #efefef; border-bottom: 1rpx solid #efefef; box-sizing: border-box; } .grid-item image { width: 60rpx; height: 60rpx; } .grid-item text { font-size: 24rpx; margin-top: 10rpx; }

声明式导航

导航tabBar页面

<navigator url="/pages/message/message" open-type="switchTab">

导航到非tabBar页面

<navigator url="/pages/info/info" open-type="navigate"> 可省略open-type

后退导航，默认delta=1

<navigator open-type="navigateBack" delta="1">后退</navigator>

编程式导航

导航到tabBar页面

gotoMessage(){ wx.switchTab({ url: '/pages/message/message', }) }

非页面

wx.navigateTo({ url: '/pages/info/info', })

后退导航

wx.navigateBack({ delta: 1 })

带参数

<navigator url="/pages/info/info?name=zs&age=20">带参数跳转到info页面</navigator>

页面事件，下拉刷新

info.json单独为自己页面开下拉刷新 enablePullDownRefresh

backgroundColor配合窗口背景颜色，仅支持16进制的颜色值

backgroundTextStyle下拉刷新loading的样式，仅支持dark和ligth

onPullDownRefresh() { this.setData({ count: 0 }) wx.stopPullDownRefresh() },

上拉触底

"onReachBottomDistance": 100，上拉触底距离默认50

onReachBottom() { var color10 = new Array(10).fill(this.randomRGBColor()); console.log(color10); },

加载

wx.showLoading({ title: '数据加载中...', }) setTimeout(function(){ wx.hideLoading() },2000)

节流，1.定义节流阀idloading，2.在方法中修改isloading节流阀的值，3.上拉触底方法中判断节流阀的值

数据中增加isloading: false，方法前先判断if(this.data.isloading) return，方法最后设置this.setData({

isloading: false

})

重新编译以后定位到原来的位置，普通编译->添加编译模式->修改为当前页面路径，刷新还在当前页面

生命周期函数

小程序声明周期，在app.js中，onLaunch小程序初始化全局一次,onShow启动或从后台进入前台,onHide前台进入后太

页面声明周期：onLoad初始化页面只一次，onShow页面显示，onReady页面初次渲染完成只调用一次，可修改标题，

onHide页面隐藏，onUnload页面卸载只一次

wxs类似于js,过滤器

数据类型，number,string,boolean,object,function,array,date,regexp.

支持类似ES5,var,普通function等

wxs遵循CommonJS规范，module,require(),module.export

内嵌wxml中

<view>{{m1.toUpper(username)}}</view> <wxs module="m1"> module.exports.toUpper = function (str) { return str.toUpperCase(); } </wxs>

外联tools.wxs

function toLower(str) { return str.toLowerCase() } module.exports = { toLower: toLower }

<view>{{m2.toLower(country)}}</view>

<wxs src="../../utils/tools.wxs" module="m2"/>

组件中，纯数据字段下划线开头，_b,指定所有的_开头数据字段为纯数据字段，pureDataPattern: /^_/

自定义组件的生命周期

created组件实例被创建时执行，attached组件实例进入页面节点执行，ready组件视图层布局完成执行，

moved组件实例被移动到节点树另一个位置执行，detached从页节点移除时执行，error抛出错误执行

在lifetimes:{}中组件生命周期。pageLifetimes:{}页面生命周期

,单个插槽，

多个插槽

通过插槽填充的内容

推荐一些有用的小程序

有赞，vant-weapp,https://vant-contrib.gitee.io/vant-weapp/#/home

共享充电宝：共享充电宝小程序: 一款线上的共享充电宝小程序

多门店派单：多门店派单小程序: 多门店派单商城小程序

在线课程：在线课程小程序: 在线课程小程序

健身馆：健身房小程序: 健身房小程序

派单：派单小程序: 派单小程序

场馆预定：场馆预定小程序: 场馆预定小程序

社区团购小程序：社区团购小程序: 一款线上的社区团购小程序

早餐线上预订：早餐订阅小程序: 一款线上早餐预订小程序

相册资源存储相册小程序: 一款线上的相册小程序

美容美发：美容美发小程序: 美容美发小程序

商城小程序：微信电商小程序: 微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。

按摩小程序：按摩小程序: 按摩小程序

需求，erp，电商，加群，目标群体，淘宝，某书，某鱼，