如何快速上手小程序开发(史上最全)
01 开发前准备
- 登录微信小程序官网:mp.wx.qq.com(这里以微信小程序为例)
- 申请属于你个人的小程序账号(分为个人和企业,在这申请个人很容易)
- 按照文档,下载微信开发者工具,进行登录,创建一个新的文件夹,他会自动给你生成默认的文件,然后填入你的appID,模板一般选择JavaScript模板。
02 页面文件的配置
1.配置文件 app.json
pages 存放项目的页面,哪个页面在最前面,哪个页面就是默认页面;
windows 项目的窗口:
"backgroundTextStyle": "light",
//背景文字
"navigationBarBackgroundColor": "#f30",
//导航栏背景颜色
"navigationBarTitleText": "猫不吃鱼",
//导航栏标题
"navigationBarTextStyle": "white"
//导航栏文字颜色:white|black
2.配置文件 xxx.json
在哪个页面下的.json文件配置,就等于单独对这个页面进行配置
"navigationBarTitleText": "爱笑话",
//标题颜色
"enablePullDownRefresh": true,
//允许下拉刷新
"backgroundTextStyle": "dark",
//背景文字颜色
"backgroundColor": "#f30",
//背景颜色
"usingComponents": {}
//使用组件
3.小程序页面(home为例)
- home.js 业务逻辑
- home.wxss 页面样式(类似于css)
- home.wxml 模板内容(类似于html)
- home.json 页面配置
4. tabBar 底部栏的配置
"tabBar": {"color": "#484848","selectedColor": "#16a5e7","list": [{"pagePath": "pages/base/base","text": "语法","iconPath": "/images/home.png","selectedIconPath": "/images/home-h.png"}]
},
//color 文字末让颜色
//selectColor 文字选中颜色
//list 页面列表
//pagePath页面地址
//text文本
//iconPath 图标地址
//selectedIconPath 选中图标地址
03 模板语法
条件渲染:wx:if="{条件}"
多重条件渲染:wx:elif="{{多重条件}}" ,wx:else
文本渲染:{{ }},属性的渲染,placeholder="{{msg}}"
列表渲染:
<view wx:for="{{list}}" wx:key="index">{{index}}--{{item}}</view>
自定义列表:多重for循环定义名称
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex">
{{myindex}} --{{myitem}}</view>
<template> 模板
定义:
<template name="user"> <view>用户名:{{uname}}</view>
</template>
导入: (只能导入template)
<import src="xxx"/>
使用:
<template is="user" data="{{uname:'mumu'}}">
<include> 引入
使用:
<include src="xxx">
相当于把src内容拷贝一份放到当前位置(不能导入template)
04 事件方法
自定义方法:showMsg(){ },
调用方法:<button bindTap="showMsg">,
表单的双向绑定:
<input value=“{{msg}}” bindinput=“changeHd”>
//定义方法更新视图与data
function changeHd(e){//获取表单的值let msg = e.detail.value;// 更新视图和datathis.setData({msg})
}
事件:bindtap点击,bindcomfim 确认,bindchange表单值发生改变,bindinput表单输入
微信api:
wx.stopPullDownRefresh() 停止下拉刷新
wx.showToast 吐司提示
wx.request(url,methd,success(){}) 网络请求
默认请求地址需要在后端配置,默认请求地址要求https
key:key值自动解构
<view wx:for="{{list}}" wx:key="docid" class="item">{{item.summary}}
</view>
Page参数:
data存储数据
onload() 当页面加载完毕
onPullDownRefresh 下拉刷新回调函数
onReachBottom 触底回调函数
自定义方法
data与更新:
js 里面方法data数据 this.data.msg
在wxml使用 {{msg}}
更新data与视图 this.setData({key:value,key2:value2})
注意this指向,在wx.xxxapi里面this 的wx这个对象不是当前页面
如何快速上手小程序开发(史上最全)相关推荐
- 【微信小程序】史上最全的《Java面试题及解析》,理论+实战双管齐下!
前言 Spring 5 于 2017 年 9 月发布了通用版本 (GA),它标志着自 2013 年 12 月以来第一个主要 Spring Framework 版本.它提供了一些人们期待已久的改进,还采 ...
- uniapp 微信小程序开发 图片上传压缩
uniapp 微信小程序开发 图片上传压缩 安卓上传图片并压缩 思路 全部代码 安卓上传图片并压缩 由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
- 宠物店小程序开发线上预约
宠物店小程序开发线上预约寄养洗护商城 随着人们生活水平的提高,中国养宠数量越来越多.据有关数据统计,中国现有宠物数量(主要指猫.狗)已经不低于1亿只.宠物已经成为家里不可替代的"家人&quo ...
- 微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台,微信读书小程序作示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...
- 微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台,微信读书小程序作了示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...
- 快速上手小程序云开发
云开发操作概述 云函数操作实战 云存储操作实战 云数据库操作实战 小程序云开发集成于小程序控制台的原生serverless云服务. 核心功能包含:云函数,云存储,云数据库 代码执行,文件存储能力,数据 ...
- PyQt5入门——手把手教你配置环境,快速上手GUI程序开发(Anaconda+PyCharm+Qt Designer+pyuic)
文章目录 引言 1. 安装python环境 1.1 安装anaconda 1.2 创建虚拟环境 2. 安装PyQt库 3. 安装pycharm 4. 在pycharm中配置PyQt 4.1 配置PyQ ...
- 宠物店小程序开发线上预约寄养洗护商城
随着人们生活水平的提高,中国养宠数量越来越多,据有关数据统计,中国现有宠物数量(主要指猫.狗)已经不低于1亿只.宠物已经成为家里不可替代的"家人",人人养宠必定成为未来的社会趋势. ...
- python快速入门期末版_史上最全Python快速入门教程,满满都是干货
原博文 2020-10-11 17:07 − Python是面向对象,高级语言,解释,动态和多用途编程语言.Python易于学习,而且功能强大,功能多样的脚本语言使其对应用程序开发具有吸引力.Pyth ...
最新文章
- 堪称神级的 Java 技术栈手册火了!
- SQL Server text field里面有换行符的时候copy到excel数据会散乱
- 安装CCS5时仿真驱动出现问题的解决方法
- Java-gt;Android并发编程引气入门篇
- 开源 免费 java CMS - FreeCMS1.9 移动APP管理 执行配置
- 拿着5家offer的Java,对面试官做了什么?
- Shell-find+exec
- 软件 规则引擎_如何设计软件规则引擎
- 最新Maven安装教程(详细)
- 资深3D游戏建模师的酸甜苦辣
- (转)爆款游戏推动硬件普及,5G 促进 VR 产业规模化运用
- 电竞达人最爱五款真无线蓝牙耳机,听声辨位低延迟TWS蓝牙耳机助你《夺冠》
- linux批量修改文件名多目录,Linux下批量修改文件名
- 思岚科技—SLAMTEC对于激光雷达的执着与坚持
- 图解项目绩效评价的13个常用方法大全
- 抖音和快手推荐策略分析
- 无法启动计算机打印机服务程序,安装驱动程序时电脑弹出错误窗口“无法启动Windows打印后台程序服务” (适用于Windows OS)...
- Android资源编辑器,使用布局编辑器构建界面
- 水轮发电机组计算机监控系统,计算机监控系统在低压水轮发电机组的应用
- Sicily 1214. 信号分析
热门文章
- 魔百盒CM211-2系列(ZG/CH/YS)海思MV300H/310芯片-刷机固件及教程
- oh-my-zsh安装教程
- 只有微信账号,我可以查询聊天记录吗?
- 实用工具网站(搜索/PPT/图片操作...)
- MEC的云边协同分析
- 面试必备:高频算法题汇总「图文解析 + 教学视频 + 范例代码」必问之 排序 + 二叉树 部分!
- android高德地图计算行驶里程,高德地图批量统计驾车轨迹的用时及总里程
- 手机banner图片自适应手机宽高定位
- 8月报考季,软考科目选哪个?
- arm交叉编译器下载