1.网页后台管理功能
开发需要基本的权限以及APPID
需要微信支付,客服、插件等功能需要在后台对应开通
上传包限制2M ---》所以图片多的尽量不要直接放本地
域名:
更改次数限制,域名必须是https的
第三方插件用的时候,必须放入第三方插件对应的合法域名
小程序基本的名称等配置也在后台
2.wxml对应html标签
view===>div 文字:text 闭合标签:image input 等必须闭合标签类似于react
<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wxss : rpx像素单位---------布局基本弹性盒布局
3.目录结构
project.config.json:项目配置文件。
app.wxss: 全局样式配置,通用。
app.js: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
4.使用 Page 构造器注册页面
//index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() { // 页面首次渲染完毕时执行 }, onHide: function() { // 页面从前台变为后台时执行 }, onUnload: function() { // 页面销毁时执行 }, onPullDownRefresh: function() { // 触发下拉刷新时执行 }, onReachBottom: function() { // 页面触底时执行 }, onShareAppMessage: function () { // 页面被用户分享时执行 }, onPageScroll: function() { // 页面滚动时执行 }, onResize: function() { // 页面尺寸变化时执行 }, onTabItemTap(item) { // tab 点击时执行 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 事件响应函数 viewTap: function() { this.setData({ text: ‘Set some data for updating view.‘ }, function() { // this is setData callback }) }, // *数据 customData: { hi: ‘MINA‘ } })
5.跳转页面:
wx.navigateTo
, wx.redirectTo
只能打开非 tabBar 页面。
wx.switchTab
只能打开 tabBar 页面。
wx.reLaunch
可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad
中获取。
wx.navigateBack:关闭当前页面,返回上一页面或多级页面。
6.循环和显示隐藏
wx:for="{{arr}}"----> 必须同步wx:key="{{index}}" ---->默认item和index ----多级循环重新定义item和index wx:for-item="item1"----wx:for-index="idx"
当 wx:for
的值为字符串时,会将字符串解析成字符串数组---------》花括号和引号之间如果有空格,将最终被解析成为字符串
wx:if=""和wx:else 显示隐藏
hidden="true"
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
7.事件
除 bind
外,也可以用 catch
来绑定事件。与 bind
不同, catch
会阻止事件向上冒泡。
wx不支持alert()
修改值:this.setData({})
8.template以及import和include
import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。
如:C import B,B import A,在C中可以使用B定义的template
,在B中可以使用A定义的template
,但是C不能使用A定义的template
。
<!-- A.wxml --> <template name="A"> <text> A template </text> </template>
<!-- B.wxml --> <import src="a.wxml"/> <template name="B"> <text> B template </text> </template>
<!-- C.wxml --> <import src="b.wxml"/> <template is="A"/> <!-- Error! Can not use tempalte when not import A. --> <template is="B"/>
include
include
可以将目标文件除了 <template/>
<wxs/>
外的整个代码引入,相当于是拷贝到 include
位置,如:
<!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>
<!-- header.wxml --> <view> header </view>
<!-- footer.wxml --> <view> footer </view>
9.页面调转传值
在跳转页面onload周期中默认参数option中接收传递参数
wx.reLaunch({ url: ‘test?id=1‘ }) // test Page({ onLoad (option) { console.log(option.query) } })
10.app.js中的生命周期
onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onError 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息