三、逻辑层

1.概念

1.小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

2.逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

3.小程序其他逻辑层功能:

增加 App 和 Page 方法，进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
提供模块化能力，每个页面有独立的作用域。

注意：小程序运行的环境不是浏览器，没有windows也没有document

2.注册小程值app.js

每个小程序都需要在 app.js 中调用 App 方法(构造函数)注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App({
//全局注册小程序唯一实例/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch() {console.log('整个周期内只执行一次')},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {console.log('小程序初始化完毕后，小程序才显示出来')    },/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {console.log('小程序隐藏了，')        },/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {console.log(msg,'监听全局的错误')}
})
//页面不存在监听函数
onPageNotFound(){// 有二维码console.log('数据不存在')wx.redirectTo({url: '/pages/index/index',})}可以任意js中的数据类型。但是经常定义成一个对象在其他页面，可以访问到全局的小程序唯一实例对象。当然在app.js中引入可任意访问(使用较少)data123:{name:20,hobby:['白骨精'，'嫦娥姐姐']}

生命周期完全可以称作为事件函数

getApp和setApp

getApp()返回小程序的唯一实例对象

let objApp= getApp()
console.log(objApp,'我是在index页面访问的App实例')

3.注册页面Page()

注册页面实例

定义页面生命周期、事件函数、自定义函数、页面中的私有数据。同时Page方法也必须穿一个参数

Page({data：{//私有数据，但是访问到页面实例，也能访问到data，同时，视图层也能访问到。name:'孙悟空'age：500},fn1(){//事件函数，普普通通的函数console.log('我是fn1函数')console.log(this.data.name)},//Page->注册页面实例onLoad(){// 页面创建时执行console.log(this)//this->Page的对象实例console.log(this.data.name)//this.fn1();},onShow(){//页面出现在前台时执行},onHide(){// 页面从前台变为后台时执行},onReady(){//页面首次渲染完毕后执行},onPullDownRefresh(){ enablePullDownRefresh app.json page.json//下来刷新功能},onReachBottom(){//距离底部距离onReachBottomDistance app.json page.json 默认距离50px触发//加载更多，下一页功能},onPageScroll(){//onscroll//可以实时监听用户滚动并获取滚动距离，用户滚动页面就会触发}
})

index.wxml中渲染数据

{{name}}

**getCurrentPages()**获取页面栈信息

index.js

let pages = getCurrentPages()

4.生命周期

App的生命周期

页面的生命周期

初始化到显示:先执行app中的onLaunch->onShow->然后再执行页面的onLoad->onShow->onReady()
隐藏：先执行页面的onHide再执行app的onHide

四、视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

1.wxml语法

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

标签(组件):文字内容、组件名、属性(属性值)、事件

1.数据绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来

总结：无论是绑定到属性上还是标签内部，都需要放变量放到双大括号中

Number\String\Boolean\Object\Array

Function在小程序中只能是事件函数，要么在逻辑层中主动调用

index.js

Page({data:{name:'swk',age:500,isPerson:false,idx:box123,hobby:['吃苹果','香蕉'],person:{name:'tsz',job:'取经'}},fn1(){},clickHandle(){console.log('ok');//改变data借鉴了reactthis,setData({age:50})}
})

index.wxml

1.基本数据渲染
<view>{{name}}</view>
2.属性绑定：建议放到双引号内
<view class="abcd">我是一个view容器</view>
<view id="{{idx}}">我是一个view容器</view>
<view bindatp="clickHandle">点击我</view>
3.控制属性
如果不写属性值，默认值为true
true/false必须加双引号，非空字符串都理解为真值
控制属性：hidden checked是否选中
<checkbox checked="{{true}}"></checkbox>
<checkbox checked="{{flase}}"></checkbox>
<checkbox checked></checkbox>

关于运算

支持简单的运算

算术、字符串拼接、三目运算、路径运算(访问数组、访问对象)、逻辑判断

不支持调用函数(vue支持)

4.关于一些基本运算
<view>{{1+1}}</view>
<view>{{'abc'+name}}</view>
<view>{{age+20}}</view>
<view>{{isPerson?'是个人':'是个猴'}}}</view>
<view>{{person.name+person.job}}</view>
<view>{{hobby[1]}}</view>
<view>{{fn1()}}</view>//不支持这种语法

2.列表渲染

属性的指令：for、当前项、当前下标、唯一的key属性

wx:for

wx:for-item

wx:for-index

wx:for

Page({data:{nums:[11,22,33,44],item:'我是页面的item值',index:'我是页面的index',person:{name:'猪八戒',age:20}，products:[{id:'10001',name:'小米'，price：12000},{id:'10002',name:'华为'，price：7000}，{id:'10003',name:'苹果'，price：1000}],str:'qaz'}
})

1.基本的遍历
wx:for="{{变量}}"
默认当前值的变量为item,下标为index
<view wx:for="{{nums}}">当前值为{{item}}-----当前下标为：{{index}}
</view>
2.改变item和index
<view wx:for="{{nums}}" wx:for-item="val" wx:for-index="idx">当前值为{{val}}-----当前下标为：{{idx}}
</view>
3.渲染对象
<view wx:for="{{person}}" wx-for-index="key">{{item}}：{{key}}
</view>
4.数组套对象
<view wx:for="{{products}}">{{iyem.id}}---{{item.name}}---{{item.price}}
</view>
5.渲染多维数组 九九乘法表
建议重新定义index和item
<view wx:for="{{1,2,3,4,5,6,7,8,9}}" class="father" wx:for-item="i"><view wx:for="{{1,2,3,4,5,6,7,8,9}}" class="son" wx:for=item="j"><view wx:if="{{i<=j}}">{{i}} * {{j}} = {{i*j}}</view></view>
</view>

循环的注意事项

1.block不会产代码，是代码的搬运工

<block wx:for="{{products}}"><view>{{item.name}}</view>
</block>

2.关于渲染时空格的问题

数组变量的花括号外面千万不要加空格

<view wx:for="{{products}} "><view>{{item.name}}</view>
</view>

3.遍历字符串

<view wx:for="{{str}} "><view>{{item}}</view>
</view>
<view wx:for="{{[11,22]+'abc'}} ">//变成字符串<view>{{item}}</view>
</view>

4.列表渲染指key属性

<!-- 基本遍历 -->
<!--
wx:key属性，指定每一次循环中(当前项的唯一性) 两种方式：*this 当前循环项的值，item需为本身是一个唯一的字符串或数组不能对对象字符串，item中某个property,唯一性，不能动态改变
-->
<view wx:for="{{num}}" wx:key="*this">
{{item}}
</view>
<view>--------</view>
<view wx:for="{{products}}" wx:key="id">
{{item}}
</view>
<view wx:for="{{prodycts}}" wx:key="index">
{{item.name}}
</view>

3.条件渲染

<!-- 1.基本的条件渲染 -->
<!-- wx:ifwx:elifwx:else-->
<view wx:if="{{!isPerson}}">这是一个二哈</view>
<view wx:else>我是一个猫星人</view><!-- 多分支 -->
<view wx:if="{{score>=90}}">hehe</view>
<view wx:elif="{{score>=80&&score<90}}">还可以</view>
<view wx:else>你要上天啊</view><view>---------</view>
<!-- block:if -->
<block wx:if="{{true}}"><view>猪八戒</view><view>背媳妇</view>
</block><!-- wx:iif VS hidden -->
<!-- 如果是在页面中频繁切换，则使用hidden如果页面在初始完毕后，某个要么显示要么隐藏，不会频繁切换，则使用if-->
<!-- 在购物车中可以使用wx:if-->
<block wx:if="{{cartList.length>0}}"><view wx:for="{{cartList}}">{{item.name}}</view>
</block>
<view  wx:else>购物车为空</view><!-- hidden 是否隐藏 做选项卡切换checked --><view hidden="{{false}}">我隐藏吗-能看见</view><view hidden="{{true}}">我隐藏吗-不能看见</view>

4.模板

能够解决代码复用，但是代码复用，有很多种方式，不仅有这一种方式是小程序特有，借鉴后端知识(include)

模块化、组件化

1.模板的基本使用

<!-- 模板的使用1.定义模板:模子<template name="模板名称">书写具体的结构</template>2.使用<template is="模板名称"></template><template is="模板名称"/>自闭和--><!-- 定义模板 --><template name="tmp1"><view>我是tmp1模板</view><view>当然，使用模板，也可以往内部传递数据</view></template><!-- 使用模板 --><template is="tmp1"></template><template is="tmp1"/>

2.模板中传递数据

  <!-- 定义模板 使用模板往模板中传递数据，必须使用data属性--><template name="tmp2"><view>我是tmp2模板</view><view>{{name}}--{{age}}</view></template><template is="tmp2" data="{{name:'zbj',age:30}}"></template><template is="tmp2" data="{{...person}}"></template><!-- ...对象前，展开运算符 -->

5.引用

<!-- 引用：<import/>小程序特有的，引入的除普通代码外的模板代码，template内的代码<include/>引入出template外的代码尽量不要混用-->
<!-- 注意：wxml文件需要带后缀 --><import src="../public/header.wxml" /><import src="../public/footer.wxml" /><template is="header"></template><template is="footer"></template><!-- include解决了import的短板 --><include src="../public/header.wxml"/>

import的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

2.wxss样式

小程当中的适配问题，已经帮开发者解决好了，新的适配单位(rpx)

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。**规定屏幕宽为750rpx。**如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

以下了解

样式导入，行内样式，选择器，全局样式，局部样式

/* 1.公共样式的导入方式一 */
@import '../public/header.wxss';

公共样式，其他文件自动加载，无需手动引入:app.wxss

局部样式如果和全局样式冲突，看优先级。

id>class>标签

权重一样，就近原则

3.事件相关

绑定、事件函数、如何传参、事件对象

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

1.基本使用

<!-- 1.事件基本的使用 -->
<!-- bind+事件名="函数名称" 绑定事件函数，大部分情况是不应该绑定箭头函数的
-->
<view class="box" bindtap="handleFn1">fn1</view>
<view class="box" bindtap="handleFn2">fn2</view>
<view class="box" bindtap="handleFn3">fn3</view>
js
Page({data:{},handleFn1(){//ES6中函数的简写形式console.log('fn1',this);},handleFn2:function(){//函数声明console.log('fn2',this)},handleFn3: ()=> {//箭头形式，访问不到thisconsole.log('fn3',this)}
})

2.有关箭头之this说明

handleFn4() {let arr = [11,22,33]let newArr = arr.map(item=>{return item+this.data.jiaxin;})console.log(newArr);}handleFn4() {let arr = [11, 22, 33]let that = this;let newArr = arr.map(function(item){return item + that.data.jiaxin;})console.log(newArr);}

3.事件分类

冒泡：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡：当一个组件上的事件被触发后，该事件不会向父节点传递。

4.绑定事件分类

bind+事件名：不阻止冒泡

bind:事件名不建议，意义不变

catch+事件名：阻止冒泡

catch:事件名不建议，意义不变

<view class="outer box1" bindtap="outerHandle"><view class="center box1" bindtap="centerHandle"><view class="inner box1" bindtap="innerHandle"></view></view>
</view>
js
outerHandle() {console.log('out')},centerHandle() {console.log('center')},innerHandle() {console.log('inner')}

5.事件对象

1.开发者主动传递参数(通过事件对象)
<!-- 事件对象 -->
<!-- 1.开发者主动传参。通过data-*-*去传递data-namedata-passworddata-user-name ->小驼峰：userName-->
<view class="box" bindtap="changeThing" data-color="red" data-user-name="zbj"></view>js
changeThing(e){let  {color,userName} = e.target.dataset;console.log(color)this.setData({color})}事件对象中
target:dataset:color: "red"userName: "zbj"

2.detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

2.事件发生后，会携带一些额外的数据信息(e.detail)

不同的标签会有不同的额外数据信息

3.target和currentTatget的区别

事件函数绑定在哪个组件上，data-就绑定在哪个组件上，通过currentTarget去获取

target是事件源

currentTarget当前事件绑定在哪个组件上

4.组件基础

内置组件

以后在小程序中，标签都统称为组件

什么是组件

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

所有组件与属性都是小写，以连字符-连接

1.属性类型

H5开发中，属性值只能是字符串

wx:for="array|object|string"
bindtap="function"
wx:if="boolean"

2.公共属性

所有组件上都有以下属性

属性名      类型      描述          注解
id      String  组件的唯一标示     保持整个页面唯一
class   String  组件的样式类       在对应的 WXSS 中定义的样式类
style   String  组件的内联样式     可以动态设置的内联样式
hidden  Boolean 组件是否显示       所有组件默认显示
data-*  Any     自定义属性         组件上触发的事件时，会发送给事件处理函数
bind* / catch*  EventHandler     组件的事件  详见事件

如果添加一些组件没有的属性，则小程序不会编译此属性

3.私有属性

学习内置组件其实就是学习私有属性

5.内置组件

1.text

<!-- 1.text组件 -->
<!-- selectable 是否可选择文本space 控制空格的问题decode 是否解码
-->
<!-- <text>我是文本</text> -->
<text selectable="{{true}}">我是文本</text>
<view>----------------------</view>
<text space="nbsp">ancd   wws                   hijdind</text>

2.icon

<!-- 2.icon组件  size默认23-->
<icon type="success" size="23" color="red"/>

3.rich-text富文本组件

<!-- 3.rich-text组件 -->
<!-- nodes：节点stringobject-->
<!-- 无法正常显示 -->
<h1 style="background:red">111</h1>
<rich-text nodes="{{htmlStr}}"/>
<rich-text nodes="{{arrStr}}"/>
js
data: {htmlStr:'<h1 style="background:red">222</h1>',arrStr:[{name:'h2',attrs:{id:'box',class:'box123',style:'background:blue'},children:[{type:'text',text:'我是h2标签'}]}]},

4.视图容器组件

(1)view

div划分区块

<!-- 1.view使用hover-class:模拟交互效果,当hover-class=none时，没有点击效果hover-start-time 按下多久出现点击hover-stay-time 松开手指停留多久hover-stop-propagation 阻塞冒泡-->
<view class="btn" hover-class="btn-active">点击我</view>
<view class="btn" hover-class="btn-active" hover-start-time="2000" hover-stay-time="3000">点击我</view>
<view class="box1" hover-class="box-active" ><view class="box2" hover-class="box-active" hover-stop-propagation></view>
</view>

.btn{width: 300rpx;height: 80rpx;line-height: 80rpx;border-radius: 80rpx;text-align: center;background: red;color: white;
}
.btn-active{opacity: .6;
}
.box1{background: blue;width: 200px;height: 200px
}
.box2{background: red;width: 100px;height: 100px;
}
.box-active{opacity: .6;
}

(2)swiper与swiper-item

<!-- swiper与swiper-item-->
<swiper class="swiper-focus" indicator-dots="{{showDots}}" indicator-color="rgba(255,0,0,.6)" indicator-active-color="#00f" autoplay  circular>
<!-- 子元素必须是swiper-item，我们不要给swiper-item写任何样式 -->
<!-- image默认不是显示图片的真实大小swiper默认宽是100%，高是150pxswiper-item封装的是100%的宽，100%的高，不能改变swiper-item的任何样式，只需要改变swiper就可以--><!-- indicator-dots true|false 是否显示小圆点indicator-color 圆点颜色indicator-active-color 当前项圆点颜色autoplay 是否自动切换duration 滚动的时间间隔circle 是否衔接--><swiper-item><image src="/static/banners/1.jpg"></image></swiper-item><swiper-item><image src="/static/banners/2.jpg"></image></swiper-item><swiper-item><image src="/static/banners/3.jpg"></image></swiper-item>
</swiper>

封装swiper

<view class="focus-container"><swiper class="s-ul" bindchange="changeColor" current="{{current}}"><swiper-item class="s-li" wx:for="{{banners}}" wx:key="index"><image src="/static/banners/{{item}}"></image></swiper-item></swiper><view class="dots"><text wx:for="{{banners}}" wx:key="index" class="{{index==current?'active':''}}"></text></view>
</view>

(3)scroll-view

横向滚动

<!-- scroll-view组件 -->
<!-- 横向滚动：为scroll-view的子元素设置display:inline-block同时为scroll-view设置不换行scroll-x 是否横向滚动--><scroll-view class="scroll-x" scroll-x><view>1</view><view>2</view><view>3</view><view>4</view><view>5</view><view>6</view><view>7</view></scroll-view>

.scroll-x{height: 200rpx;white-space: nowrap;
}.scroll-x view{width: 300rpx;height: 200rpx;margin-right: 20rpx;background-color: red;display:inline-block;
}

纵向滚动

<!-- 纵向滚动 --><!-- scroll-view的高度必须设置scroll-y属性控制是否纵向滚动--><scroll-view class="scroll-y" scroll-y><view>1</view><view>2</view><view>3</view><view>4</view><view>5</view><view>6</view><view>7</view></scroll-view>

css

.scroll-y {height: 600rpx;
}.scroll-y view {width: 300rpx;height: 200rpx;margin-bottom: 20rpx;background-color: red;
}

京东类别案例：

<!-- scroll-into-view:属性值 为子元素的某一个id值-->
<view class="category-container"><scroll-view class="category-l" scroll-y><view bindtap="_jumpCate" data-cate-id="cate1">手机</view><view bindtap="_jumpCate" data-cate-id="cate2">电脑</view><view bindtap="_jumpCate" data-cate-id="cate3">家居</view><view bindtap="_jumpCate" data-cate-id="cate4">家居1</view><view bindtap="_jumpCate">家居1</view><view bindtap="_jumpCate">家居1</view><view bindtap="_jumpCate">家居1</view><view bindtap="_jumpCate">家居1</view><view bindtap="_jumpCate">家居1</view></scroll-view><scroll-view class="category-r" scroll-y scroll-into-view="{{cateId}}"><view class="father" id="cate1"><view>华为手机</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father" id="cate2"><view>华为电脑</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father" id="cate3"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father" id="cate4"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father" id="cate5"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view><view class="father"><view>华为家居</view><view>小米</view><view>小米</view><view>小米</view><view>小米</view></view></scroll-view>
</view>

data: {cateId:''},_jumpCate(e){let {cateId} = e.currentTarget.dataset;console.log(cateId)this.setData({cateId})},

5.表单组件

搜集数据

表单元素的vlue，表单提交，元素上需要添加name属性

<!--
原生input
type-->
<view class="page"><form bindsubmit="_submitTh" bindreset="_resetTh"><view class="title">请填写以下信息</view><view class="_Title">姓名：</view><!-- placeholder 提示文字 --><input class="_input" placeholder="请输入姓名" name="username"/><view class="_Title">联系方式：</view><!-- value 默认表单元素的值 --><input class="_input" placeholder="请输入手机号" value="158" name="phone" type="number" /><view class="_Title">证件号：</view><!-- type:number idcart digit --><input class="_input" placeholder="请输入身份证号" type="idcard" name="cardid" /><view class="_Title">密码：</view><!-- password 是否是密码框 --><input class="_input" placeholder="请输入密码" password name="password" /><view class="_Title">性别</view><radio-group class="radio_group" bindchange="sexChange" name="sex"><view><radio value="男">男</radio></view><view><radio value="女" checked>女</radio></view><view><radio value="保密" color="red">保密</radio></view></radio-group><view class="_Title">您的爱好是什么</view><checkbox-group name="hobby"><checkbox value="爬山" color="red">爬山</checkbox><checkbox value="游泳" checked>游泳</checkbox><checkbox value="篮球">篮球</checkbox></checkbox-group><view class="_Title">您平时去哪里锻炼</view><checkbox-group bindchange="_checkGroup" name="where"><checkbox value="家里" color="red">家里</checkbox><checkbox value="体育馆" checked>体育馆</checkbox><checkbox value="公园">公园</checkbox></checkbox-group><view class="_Title" name="agree">您是否同意我们联系您</view><view><!-- type switch/checkbox --><switch type="checkbox" bindchange="_chooseArgnt"></switch></view><view class="btn"><!-- size :default/mini/type:parimary/default/warningform-type:submit/reset--><button class="submit" size="mini" type="parimary" form-type="submit">提交</button><button class="reset" size="mini" type="warn" form-type="reset">重置</button></view></form>
</view>

css

.page{padding: 15rpx 30rpx;
}
.title{height: 82rpx;line-height: 82rpx;color: white;background: #ff4500;font-size: 40rpx;padding-left: 30rpx;
}
._Title{font-size: 50rpx;font-weight: bold;padding: 30rpx 0 10rpx 0;
}
._input{border:1px solid #646464;height: 60rpx;line-height: 60rpx;padding-left:30rpx;border-radius: 20rpx;
}
.radio_group view{margin-bottom: 15rpx;
}
.btn{display: flex;justify-content: space-between;}
.submit{}
.reset{}

// pages/04form/04form.js
Page({/*** 页面的初始数据*/data: {},_checkGroup(e) {// 复选框的数据结构为数组console.log(e)},sexChange(e) {// 单选框里的数据结构为字符串console.log(e)},_chooseArgnt(e) {console.log(e)},_submitTh(e) {console.log(e)},_resetTh(e) {console.log(e)}
})

6.媒体组件

image

<!-- 图片懒加载srclazy-load:是否启用懒加载show-menu-by-longpress 是否展示小程序菜单小程序码放到图片上--><image src="/static/erha1.jpg" class="img1" /><image src="/static/erha1.jpg" class="img1" bindload="_load" /><!-- <image src="/static/er22ha1.jpg" class="img1" binderror="_error" /> --><image src="/static/erha1.jpg" class="img1" bindload="_load" show-menu-by-longpress /><image src="/static/erha1.jpg" class="img1" bindload="_numAdd" lazy-load /><image src="/static/erha2.jpg" class="img1" bindload="_numAdd" lazy-load /><image src="/static/hello.jpg" class="img1" bindload="_numAdd" lazy-load/><image src="/static/erha1.jpg" class="img1" bindload="_numAdd" lazy-load />

前端实习——微信小程序(2)相关推荐

视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
修复版拼团商城前端+后端微信小程序源码下载
1.怎么玩? 多人拼团,部分人获得得商品,没获得商品的人退款并瓜分红包,红包佣金从获得商品的人的订单利润里返. 2.参与拼团的人需要支付多少钱? 每个人需要支付商品规定的卖价金额,一元购模式的大家分担 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
修复版薅羊毛拼团商城前端+后端微信小程序源码下载
修复版薅羊毛拼团商城前端+后端微信小程序源码下载 1.怎么玩? 多人拼团,部分人获得得商品,没获得商品的人退款并瓜分红包,红包佣金从获得商品的人的订单利润里返. 2.参与拼团的人需要支付多少钱? 每个 ...
前端开发----微信小程序入门级教程（前篇）
前言前段时间,凭借着出生牛犊不怕虎的劲头,凭借着一点Java基础和前端入门的知识水平,买了域名和服务器准备搭建自己的一个技术站点,初衷是旨在打造自己成为一个T形全站工程师.后经过各种百度,各种折腾终 ...
uniapp 前端获取微信小程序 URL Link (HTTPS调用)
前端基于 uniapp 获取微信小程序 URL Link 短链,适用于短信.邮件.网页.微信内等拉起小程序的业务场景.目前仅针对国内非个人主体的小程序开放. 前言:微信小程序此前可以在小程序管理后台- ...
[前端面试] 微信小程序相关面试题
前言话不多说,来看下微信小程序有哪些面试题吧! 1.请谈谈微信小程序主要目录和文件的作用? project.config.json 项目配置文件,用得最多的就是配置是否开启https校验: App. ...
vue项目实战-4.前端渲染.微信小程序
设置整个页面结构 1.由于是手机端项目,所以需要加上手机端相关处理,修改index.html代码,增加meta处理 <meta name="viewport" content ...

前端实习——微信小程序(2)