脚本宝典收集整理的这篇文章主要介绍了微信小程序开发指南,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
官网 微信小程序,简称小程序,英文名 MiniPRogram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,对于用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用。
小程序
普通网页
官网
文件 | 必填 | 描述 |
---|---|---|
app.js | 是 | 小程序逻辑-小程序入口文件 |
app.json | 是 | 小程序公共配置文件 |
app.wxss | 否 | 小程序公共样式表 |
2. 页面结构
一个小程序page页面由四个文件组成,分别是:
文件 | 必填 | 描述 |
---|---|---|
js | 是 | 页面逻辑 |
wxML | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
3. sITemap 配置 4. project.config.json 编辑器配置,项目中我们可以操作编辑器来动态修改project配置,不用我们去死记硬背哪些配置相关单词.
app.JSON 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 注意点:
{
"pages":[
"pages/index/index",
"pages/LOGs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloaDFile": 10000
},
"debug": true
"style": "v2",
"sitemapLocation": "sitemap.json"
}
字段 | 描述 |
---|---|
debug | debug调试是否开启 |
pages | 注册小程序的页面路径列表 |
- | 数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。 |
window | 全局的默认窗口表现 |
- | 用于设置小程序的状态栏、导航条、标题、窗口背景色 |
tabBar | 小程序底部或顶部菜单定义 |
networkTimeout | 小程序网络请求超时时间设置 |
usingcomponents | 自定义组件配置 |
WXML是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 wxml是一个严格的标记性语言,有开始就必须有结束,单标签就一个有结束符。
语法:{{}} 在js逻辑层中定义数据源,在wxml通过插值表达式调用定义好的数据源中数据
<!-- wxml -->
<view>{{message}}</view>
<image srcc='{{src}}' />
<!-- page.js -->
page({
data:{
message:'ajgsdh',
src:'sasd'
}
})
语法:setData 通过一个setData方法来进行后续数据源数据的修改工作。 注意:this的指向问题,setData是当前页面对象中的方法。
<!-- page.js -->
onLoad(){
setTimeout(()=>{
this.setData({message:'你好'})
})
}
语法:wx:for
data:{
users:['张三','李四'],
objArr:[
{id:1,name:'搜索'},
{id:2,name:'地方'}
]
}
用法一
<view wx:for='{{users}}' wx:key='{{index}}'>{{item}}--{{index}}</view>
用法二
<view wx:for='{{users}}' wx:for-index='key' wx:for-item='val' wx:key='{{key}}'>{{val}}--{{key}}</view>
用法三
<view wx:for='{{objArr}}' wx:key='{{item.id}}'>{{item}}--{{index}}</view>
语法:wx:if 在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块 也可以用 wx:elif 和 wx:else 来添加一个 else 块
<view wx:if='{{age<10>}}'>青年</view>
<view wx:elif='{{age<20>}}'>少年</view>
<view wx:else>ss</view>
WXML 提供两种文件引用方式:import和include 1)import
<template name="user">
<text>{{title}}</text>
</template>
注意: name template定义的模板名称,一个文件中可以定义多个template但name的名称不能重复
<import src="item.wxml"/>
<template is="item" data="{{title: '你好世界'}}"/>
注意:
2)include 把引入的文件内容直接复制到目录文件中。 template 不生效
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
WXSS是一套样式语言,用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位 小程序中全屏尺寸数值是 : 750rpx
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。 在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #Firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
小程序数据互交就是通过不同的事件函数来完成的,了解生命周期函数,对于以后的数据交互是非常重要的。
名称 | 描述 |
---|---|
onLoad(options) | 页面加载时触发,可获取路径中的参数(1) |
onReady() | 页面渲染完成(1) |
onShow() | 页面显示/切入前台触发(N) |
onHide() | 页面隐藏/切入后台时触发(N) |
onPullDownRefresh() | 监听用户下拉动作,此事件需要在app.json文件中window节点中"开启全局的下拉刷新"enablePullDownRefresh":true,才能触发它 |
onReachBottom() | 上拉触底事件,需要当前页内容超过一屏幕 |
onPageScroll() | 滚动事件 |
onShareAppMessage() | 自定义分享 |
onUnload() | 页面卸载 |
语法:bind:事件名='方法名'、catch:事件名='方法名' 注意:次奥程序中绑定</font color='red'>方法名不能用小括号(),直接写方法名称即可 bind:冒泡事件 catch:非冒泡事件 原生组件:camera、canvas、live-player、live-pusher、video、map、textarea、input 非原生组件:bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap='方法名'
<view bind:touchstart='start' bind:touchedn='end'></view>
<view bind:touchstart='click2' ></view>
click2(){}
...
BaseEvent 基础事件对象属性列表
属性 | 类型 | 说明 |
---|---|---|
tyPE | string | 事件类型 |
timeStamp | Integer | 事件生成的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 data-开头定义的属性 |
currentTarget | Object | 当前组件的一些属性值集合(对象)在组件中data-开头定义的属性 |
getSomeData(evt){
console.log(evt.type,'cc') //类型
console.log(evt.timeStamp,Date.now(),'dd') //时间
console.log(evt.target,'ee') //属性
console.log(evt.currentTarget,'ff') //属性
}
组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间。
类型 | 描述 | 注解 |
---|---|---|
Boolean | 布尔值 | 组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型{{}} |
Number | 数字 | 1, 2.5{{}} |
String | 字符串 | "string" |
Array | 数组 | [ 1, "string" ]{{}} |
Object | 对象 | { key: value }{{}} |
EventHandler | 事件处理函数名 | "handlerName" 是 Page中定义的事件处理函数名 |
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标示 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean [false] | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind* / catch* | EventHandler | 组件的事件 | 详见事件 |
tab切换
<view class='nav'>
<view class='{{css[0]}}' data-index='{{0}}' bind:tap='tabfn'>栏目一</view>
<view class='{{css[1]}}' data-index='{{1}}' bind:tap='tabfn'>栏目二</view>
</view>
<view class='cnt'>
<view hidden='{{isshow[0]}}'></view>
<view hidden={{isshow[1]}}></view>
</view>
Page({
data:{
css:['now',''],
isshow:[false,true]
},
tabfun(event){
let index=event.target.dataset.index //获取data-*传值
let css=this.data.css
let isshow=this.data.isshow.mao((item,key)=>{
css[key]=''
return true
})
css[index]='now'
isshow[index]=false
this.setData({isshow,css})
}
})
{
"usingComponents": {
// 在父模板中调用的标签名 组件的路径
"com-name": "path/to/the/custom/component"
}
}
<com-name>
原理:类似于vue 自定义属性--properties接收 父级:
<com-name name='测试'>
子集:
properties:{
name:{
type:String,
optionalTypes:[String,Number]
value:'123'
}
}
原理:类似于vue 自定义事件并(triggerevent)传递---evt.detail 子集:
<view data-name='son' bind:Tap='sonClick'></view>
sonClick(evt){
let name=evt.target.dataset.name
this.triggerEvent('getName',{name},false)
}
父级:
<com-name bind:getName='click'/>
click(evt){![](https://img2020.cnblogs.COM/blog/1731300/202109/1731300-20210927140557579-1531021586.jpg)
let name=evt.detail
}
写法与js类似,不支持ES6 创建wxs模块 tools.wxs
function mysub(str,len){
return ...
}
module.exports={
mysub:mysub
}
调用 在wxml文件去引用 引用的时候一定要用相对应地址 每个 wxs 模块均有一个内置的 module 对象。
<wxs src='../../tools.wxs' module='tools'/>
<view>tools.mysub('hfghaf')</view>
wx.request(OBJECT)
<!-- app.json -->
"networkTimeout":{
"request":10000
}
<!-- http.js -->
const http = ({url,data={},method='Get',header={}})=>{
wx.showLoading({
title:'加载中'
})
return new Promise((resolve,reject)=>{
wx.request({
url,
method,
success:res=>{
resolve(res)
},
fail:()=>{
reject('fail')
},
complete:()=>{
wx.hideLoading()
}
})
})
}
<!-- config uri.js -->
const host = 'http://localhost/api/v1'
export default {
new:'${host}/news'
}
<!-- models newsModels.js -->
import http From '../utils/http'
import config from '../config/uri'
// 获取新闻列表
export const getNew=(page=1)=>{
return http({
url:config.news
})
}
import {getNews} from '../../models/newsModel'
getNews().then(res=>{
this.setData({
news:res.data
})
})
小程序是有缓存的,但是它缓存没有过期时间,单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。 如果缓存达到了上限,清除缓存,清除缓存机制:最久未被使用。 重要的数据不要放在小程序缓存中。
class Cache {
/*
1、设置缓存
单位毫秒
*/
set(key, value, expire = 36000) {
expire = Date.now() + expire * 1000
//原有的数据改成对象,加上缓存时间
let data = { expire, value }
wx.setStorage({
key,
data,
});
}
/*
2、获取缓存
*/
get(key) {
if (this.has(key)) {
return ''
}
return wx.getStorage(key).value
}
/*
3、清理缓存
*/
remove(key) {
wx.removeStorage({
key: key
});
}
}
以上是脚本宝典为你收集整理的微信小程序开发指南全部内容,希望文章能够帮你解决微信小程序开发指南所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。