简单准备
安装环境
下载微信开发者工具
搜索“微信小程序api”,选择“工具”,点击“微信开发者工具”,选择稳定版,选择自己电脑的版本,我的是windows64(但是选择这个打开后一直打不开不知道为什么,然后我选了32位就好了)。
新建项目
选择新建项目,appid选择“测试号”(刚开始比较简单)。
简单描述
pages里有index首页和logs启动日志
utils是公共的文件
.js是逻辑层
.json是配置项
.wxcss是样式层
js里面写方法,html里面写内容,css里面写样式,json里面写配置
简单了解
编译——>提供编译模式,可以显示不同的页面
简单代码
从“微信小程序api”里面获得代码解说和说明
组件
基础布局
1.view块标签(类似div块,冒泡阻止hover-stop-propagation
2.text行标签(类似span一行的,可选中user-select,空格space,解析decode)
图像媒体组件
0.右击在资源管理器中新建一个images
1.图片image有默认宽高,mode属性可设置,常用widthFix缩放模式
2.show-menu-by-longpress长按图片可保存发送
3.src=网络地址也可以
超链接(navigator是块元素)
1.用url跳转,但是小程序不可跳到网络网站
2.open-type跳转方式(可不可以再跳回去)
scroll-view滚动视图
0.弹性盒模型display:flex,在同一行用flex-wrap:nowrap
1.scroll-x,scroll-left=“150”是横向滚动,在什么地方出现半个
swiper轮播组件
1.rpx是小程序轮播图自适应比例的单位
2.indicator-dots点
3.circular循环
表单组件
1.button:primary,disabled,loading,open-type
2.form:bindsubmit,
3.checkbox:
4.input:auto-focus
5.switch
其他类型组件
icon,progress
框架
全局配置(在app.json里面)
1.改window,一般4个
2.加上tabBar底边,里一定有list(2-5),(pagePath,text,iconPath,selectedIconPath)
单页面配置(在pages里面的…json里面)
wxml数据绑定
1.在demo.js里面写data数据,在demo.wxml里面调用数据(数组,对象等)
wxml的条件渲染:if
1.wx:if="{{false}}" wx:elif wx:else
js代码判断要写在{}里面,字符串直接写在"里
2.block 标签不显示出来,只是做一个wx:if包裹
3.if,elif,else必须靠在一起,否则会报错
wxml的列表渲染:for
1.wx:for="{{数组}}" {{index}} {{item}}
2.数组的元素是item,而对象则是item.a
3.wx:key=“this” wx:key=“index”
框架接口
在js里面的demo.js里各生命周期函数
1.全部删除然后,输入page选择第二个然后回车就全部初始化显示了
2.生命周期函数
onLoad——>onReady——>onShow——>onHide
onload,onready一个页面只加载一次
onload监听页面加载
onready监听页面初次渲染完成
onshow监听页面提示
onhide监听页面隐藏
3.页面相关事件处理函数
监听用户下拉动作onPullDownRefresh
页面下拉触底事件onReachBottom(高度很高)
点击右上角分享onShareAppMessage
事件函数及其setData语法(自定义事件)
1.绑定事件:bindtap=“事件名字”,bind~="
2.pages里面是对象,data:{},事件名字:function(){},
3.从前端传过来的数据一般都在控制台console的currentTarget里面
4.只有setData方法才可以改变数据name值
api
基础语法
手机型号:wx.getSystemInfoSync.mode
加载动画:wx.showLoading
消息提示框:showToast
路由语法
设置链接不要url设为跳转到tarbar页面,如果非要跳转用open-type=“reLaunch”/“switchTab”可以带参数,不可以带
布局页面模拟数据请求
request模拟数据请求
详情—>本地设置—>不校验合法域名
后端接口去哪里找?
在unload里面写得到后端数据,然后(因为小程序分页展示多个新闻)所以要把得到页数据封装为一个函数,然后unload调用它
es6简单用法
const,let,解析变量用``反斜杠和${},
解构赋值(数组,对象),箭头函数function(()=>{}),
数组循环遍历:
原本for()
forEach(item,idx)
map()
for(var i of obj),
展开运算符是…arr