微信小程序实例应用分步练习完整GitHub项目链接
作者:小阳 | 来源:互联网 | 2023-05-17 20:47
小程序的简单练习的步骤,附加GitHub练习库—欢迎大家浏览,希望能够共同提高小程序的定义不需要下载安装,可以立即使用因为体积比较小,在加载的时候用户基
小程序的简单练习的步骤,附加GitHub练习库—欢迎大家浏览,希望能够共同提高
小程序的定义
- 不需要下载安装,可以立即使用
- 因为体积比较小,在加载的时候用户基本赶紧不到下载的过程
- 用户“用完即走”,不用关心是否安装太多的应用
- 应用无处不在,随时可用 小程序,让服务无处不在。
微信小程序适用范围:
微信小程序开发
微信开发的方式
- 单纯的微信网页开发(聊天的时候,发送的一些网页,在微信里面打开的)
- 微信小程序(相当于一个嵌套在微信里面的App)
- 微信公众号开发,需要关注的那些账号
- 订阅号
- 服务号(必须要公司实体才能申请)
相关
单纯的网页开发(公众号)
- 兼容性问题
- 开发同等于正常的HTML5页面开发
- 先将页面上传到服务器,然后测试
- 需要使用微信提供的js js-sdk
小程序
- 文档后缀名不同
- wxml标签不同
- 所有的HTML标签在wxml中无法使用,除非是在样式中设置
- wxss 基本上 和 css 没什么区别
- js
- 微信小程序的js中,取消了所有的dom节点,禁止了动态生成的操作
- 使用组件化,数据绑定的方法来实现逻辑
- 类似于vue
doy1
- 模板标签template使用
定义模板
<template name="header">
<view>
这是头部
view>
template>
<template name="header2">
<view>{{title}}view>
<view>{{name}}view>
template>
使用模板
<template is="header">
template>
<template is="header2" data="{{title}}">
template> -->
引入方法import和include的不同
<include src="../../template/header.wxml"/>
<template is="header" data="{{item}}">
template>
- include引入外部的模板的时候 忽略了template定义的模板 直接引入相当于吧模板里面的内容复制到我们的页面
- import 引入 只会引入目标文件中定义的 template 要通过template is=”header” 这样的方式使用模板,该外部模板传入数据的时候,需要绑定到data=”{{item}}
- 引入外部模板
doy2
标签使用
- 1.使用以前的HTML标签的话,需要把这些标签转换成块元素,但是官方不建议使用–》推荐使用view
- 2.使用以前的HTML标签的话,无法使用 id 选择器
——————还是使用官方提供的 标签 比较好
- view 相当于我们以前的div 块级元素
- text文本标签 内联元素 除了文本节点意外的其他节点都无法长按选中
布局方法
wxss选择器
- .class
- id选择器
- element
- element,element 分组选择器
- ::before
- ::after
事件绑定
event事件
touch事件
绑定事件 bind和catch的区别
- bind 事件绑定不会阻止事件向上冒泡
- catch 事件绑定可以阻止冒泡事件向上冒泡
doy3
requestData() {
var _that = this;
wx.request({
url: 'http://www.phonegap100.com/appapi.php?a=getPortalCate',
data: {
nmae: '小刘',
age: '24'
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.data);
_that.setData({
list: res.data.result
})
},
fail(err) {
console.log("err:" + err);
}
})
},
点击查看官方文档
我的github练习目录
- doy1
- doy02
- doy03
- itday01
- itday02
- locally-life
- muke
- weapp-locally-master
- test
- ReaderMovie