好物优选点击查看详情 京东购买

暂无内容

微信小程序环境搭建-项目案例 (一)启动页

最新闲来无事,看了看研究了下微信小程序,从环境搭建到项目案例 ,废话不多说 ,手把手带你入门微信小程序 !

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 全局配置顶部的的导航 !
如:项目引导页面

 <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>
 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  longtap  transitionend  animationstart  animationiteration  animationend 

具体每个事件的用法 ,大家可以查看官方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 。大家可以自己试下两个跳转的区别在哪里 ?
接下来 我会继续写项目案例 ,分享一个完整的项目!

原文链接:https://blog.csdn.net/shaowei828/article/details/78668425

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享