微信小程序环境搭建-项目案例 (一)启动页
来源:互联网 发布:淘宝客服有在家做的吗 编辑:程序博客网 时间:2024/05/16 15:52
最新闲来无事,看了看研究了下微信小程序,从环境搭建到项目案例 ,废话不多说 ,手把手带你入门微信小程序 !
1:先下载微信的开发工具:
地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
可以根据自己的电脑 下载对应的版本 !
第一次打开: 会显示如下 微信扫描界面
2:模式选择
开发者工具提供两种开发模式的选择。
公众号网页调试。选择公众号网页调试,将直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能。
小程序调试。选择小程序调试,将进入小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。
我们这里可以选择小程序项目
接下来 需要我们验证小程序 appID ( 没有的 可以点击体验 也是一样可以的 )
接下来,我们就可以做开发了:
这里是我自己健的目录 !
我们可以看到 每个页面都应该有四个文件 ( 后缀:.js , .json , .wxml , .wxss ) 其实这里的 .json 是配置文件 , 如果不需要配置的话 是可以省略的!
3:app.json
我先说这个文件 :
这个是全局的配置文件
栗子:
{ "pages": [ "pages/index/index", "pages/home/home", "pages/home/home-detidal/home-detidal" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#405f80", "navigationBarTitleText": "学习小程序", "navigationBarTextStyle": "#fff" }}
(1)pages 每个页面我们都在在这里注入下 , 我建了三个页面 默认启动页面为 index 页面。( 谁在第一位 谁就为打开页面 )!
(2) window 全局配置顶部的的导航 !
如:项目引导页面
<!--index.wxml--><view class="container"> <image src='/images/icon/avator.jpg' class='avator'></image> <text class='user-name'>Hello , 小程序</text> <view class='moto-container'bindtap="openHome"> <text class='moto'>开启小程序之旅</text> </view></view>
//index.wxss page{ background-color: #a1d483;}.container{ display: flex; flex-direction: column; align-items: center;}.avator{ width: 200rpx; height: 200rpx; border-radius: 50%; margin-top: 160rpx;}.user-name{ font-size: 32rpx; margin-top:100rpx;}.moto-container{ width: 200rpx; height: 80rpx; border: 1px solid #405f80; border-radius: 5px; text-align: center; margin-top:200rpx;}.moto{ font-size: 22rpx; line-height: 80rpx; font-weight: bold;}
最终页面展示:
可以看到下面有个按钮 ,这里我们做页面切换跳转用的 !
3:事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
touchstart //手指触摸动作开始 touchmove //手指触摸后移动 touchcancel //手指触摸动作被打断,如来电提醒,弹窗 touchend //手指触摸动作结束 tap //手指触摸后马上离开 longpress //手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0longtap //手指触摸后,超过350ms再离开(推荐使用longpress事件代替) transitionend //会在 WXSS transition 或 wx.createAnimation 动画结束后触发 animationstart //会在一个 WXSS animation 动画开始时触发 animationiteration //会在一个 WXSS animation 一次迭代结束时触发 animationend //会在一个 WXSS animation 动画完成时触发
具体每个事件的用法 ,大家可以查看官方api 里面讲解的很详细!
我们可以看到 我已经添加了一个事件与方法了
<view class='moto-container'bindtap="openHome"> <text class='moto'>开启小程序之旅</text></view>// bindtap="openHome"
js 事件我们都写在 对应的js 文件里
Page({ openHome(){ wx.redirectTo({ url: '../home/home' }) }})
ps. 还有一个跳转 wx.navigateTo 。大家可以自己试下两个跳转的区别在哪里 ?
接下来 我会继续写项目案例 ,分享一个完整的项目!
- 微信小程序环境搭建-项目案例 (一)启动页
- struts2入门教程一(环境搭建,基本案例实现)
- struts2入门教程一(环境搭建,基本案例实现)
- Spring MVC搭建环境三部曲(一) 搭建项目
- ffmpeg学习一:启动篇(学习计划与环境搭建)
- 微信小程序环境搭建
- 项目进阶 之 持续构建环境搭建(一)架构
- 项目进阶 之 集群环境搭建(一)概述
- 项目进阶 之 集群环境搭建(一)概述
- MyEclipse+Tomcat+MAVEN+SVN项目完整环境搭建(一)
- html5之phonegap环境搭建、创建项目(一)
- maven+springMVC+hibernate项目搭建(一基础环境配置)
- Play Framework 2.5 环境搭建与新建项目(一)
- 模拟搭建Web项目的真实运行环境(一)
- Maven搭建Spring+Struts2+Mybatis项目(一) Maven环境
- Java web项目学习一(Mac idea环境搭建)
- [Angular] Angular环境搭建及新建项目(一)
- springboot个人博客系统---搭建项目环境(一)
- 计算页码总数的高效方法
- 客户端 消息处理
- eclipse编译出现错误: 找不到或无法加载主类的解决
- 分配问题
- deepmind_lab msys2-------------------安装好了下载
- 微信小程序环境搭建-项目案例 (一)启动页
- linux高性能服务器编程学习笔记四:HTTP协议相关格式
- 《2017中国网络视听发展研究报告》(全部PPT)
- Codeforces Round #447 (Div. 2) E DAG+scc (未敲)
- 安卓6.0动态获取权限
- MySQL分区表基础
- 批处理修改Windows的IP地址
- 在centos上安装elk
- Git 基础