微信小程序初级篇-01
来源:互联网 发布:好听的网络公司名称 编辑:程序博客网 时间:2024/06/14 17:22
微信小程序
什么是微信小程序
微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。什么产品可以使用小程序
由于小程序不需要下载,占用内存小,用户体验优秀,一些使用频率低的应用可以使用小程序。微信小程序的开发准备
1.微信小程序开发API介绍文档链接
微信小程序开发API
2.微信注册账号(个人账号就可以开发)
3.小程序开发工具
开发工具下载地址以及介绍
建一个项目
扫码登陆
新建一个项目有两个注意的点:
路径不能有中文
我一开始路径含有中文,项目新建后发现文件夹中没有项目。可以选择无APPID来建一个项目
初始项目,选择手机Nexus 5x
三个全局文件
- app.js
程序启动时执行的文件 - app.json
规定了显示的页面(.wxml 文件,类似于html),按照循序来显示,以及标题栏的样式等,如果别的页面没有定义json则用此文件 - app.wxss
页面布局样式,如果别的页面没有定义wxss则用此文件
组件的使用
组件介绍文档链接
组件介绍按钮的使用示例
1.添加按钮
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="btnClick">button</button>
2.设置按钮绑定事件
用到了条件渲染wx:if
<view bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text></view>
Page({ data: { motto: 'Hello World', userInfo: {}, btnText : '按钮', Show : true }, btnClick:function() { this.setData({Show:!this.date.Show}) },
响应:
如果已经显示头像信息,则隐藏;如果隐藏头像信息,则显示
- 数据绑定
{{}}来得到数据
data: { motto: 'Hello World', userInfo: {}, btnText : '按钮' },
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="btnClick">{{btnText}}</button>
框架的使用
文档链接
框架的使用列表的渲染示例
<view bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <view wx:for="{{[1,2,3]}}"> <text class="userinfo-nickname">{{userInfo.nickName}}{{index}}</text> </view> </view>
- 公用一个文件
include标签,包含文件夹template里的tmp.wxml文件
<include src="../template/tmp" />
import标签,导入文件的一个模板
模板文件:
<template name="name">lxf</template><template name="password">123</template>
引用文件:
<view bindtap="bindViewTap" class="userinfo" wx:if="{{Show}}"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"> </image> <text class="userinfo-nickname">{{userInfo.nickName}}{{index}}</text> <import src="../template/temp" /> <template is="name"></template> </view>
作者:林潇霏
原文链接:微信小程序初级篇-01
阅读全文
0 0
- 微信小程序初级篇-01
- 微信小程序初级篇-01
- 微信小程序初级篇-02
- 微信小程序初级篇-02
- 微信小程序开发初级实践篇
- 微信小程序开发初级实践篇
- 微信小程序开发--初级实践
- 程序题练习---初级篇
- 初级程序的心得
- java程序初级理解
- 初级程序的日常
- 聊天程序初级版
- 初级三子棋程序
- Maven教程初级篇01
- WebService初级入门小程序
- 初级安卓程序试题
- halcon程序初级学习(一)
- c语言初级小程序
- <纯干货-4> 加州大学伯克利分校2017年最新深度强化学习视频课程_part3
- [LeetCode] Triangle
- 007 使用MyBatis,easyUI实现CRUD操作样例-R操作(重构)
- 安卓实现图片旋转放大缩小
- 树莓派程序开机自启动
- 微信小程序初级篇-01
- c语言中的绝对值
- C++ 里面的“\\\\.\\” 意思
- mysql 中时间戳和日期相互转换
- CSS选择器总结
- 头部标记
- ftp连接服务器失败:响应:220-FileZilla Server version 0.9.24 beta 响应:220-written by Tim Kosse (Tim.Kosse@gmx.d
- 多线程-以前的线程安全的类回顾
- 第三步优化