1 Star 0 Fork 0

呆雁/wechat-miniprogram-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
微信小程序的入门知识

来自阮一峰日志 http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html
1、初次上手 hello world
2、小程序的项目结构和页面样式
3、微信小程序里面加入 JavaScript 脚本
4、API使用

结构分成两层:描述整体程序的顶层 app 脚本,以及描述各个页面的 page 脚本。
项目配置文件 app.json
  用于整个项目的配置,对于所有页面都有效。
在顶层放置一个app.wxss文件
  这个文件的设置总体样式,对所有页面都有效。

window属性,用来设置小程序的窗口
<view>标签表示一个区块
<text>表示一段行内文本
<swiper indicator-dots="{{true}}" autoplay="{{true}}" style="width: 375rpx"> 这种{{...}}的语法,表示里面放置的是 JavaScript 代码, 例如 {{name}}表示读取全局变量name的值
    Page({
      data: {
        name: '张三'
      }
    });
数据绑定:指的是脚本里面的某些数据,会自动成为页面可以读取的全局变量,两者会同步变动(MVVM 模式)

小程序的常见事件有下面这些:
tap:触摸后马上离开。
longpress:触摸后,超过 350ms 再离开。如果指定了该事件的回调函数并触发了该事件,tap事件将不被触发。
touchstart:触摸开始。
touchmove:触摸后移动。
touchcancel:触摸动作被打断,如来电提醒,弹窗等。
touchend:触摸结束。

小程序允许页面元素,通过属性指定各种事件的回调函数(回调函数必须在页面脚本中定义)
capture-bind:捕获阶段触发。
capture-catch:捕获阶段触发,并中断事件,不再向下传播,即中断捕获阶段,并取消随后的冒泡阶段。
bind:冒泡阶段触发。
catch:冒泡阶段触发,并取消事件进一步向上冒泡。

修改页面配置对象的data属性时,一定要通过this.setData()去修改

动态提示 Toast: 
  调用wx.showToast()方法,wx是小程序提供的原生对象, 所有客户端 API 都定义在这个对象上面
    wx.showToast()会展示微信内置的动态提示框,title属性指定提示内容,duration属性指定提示框的展示时间,单位为毫秒。

对话框 Modal: wx.showModal()
WXML 渲染语法
API使用: wx.request()方法去请求远程数据
<open-data>组件: 在页面上展示当前微信登录用户的身份信息
     <open-data>支持的用户信息如下。
      userNickName:用户昵称
      userAvatarUrl:用户头像
      userGender:用户性别
      userCity:用户所在城市
      userProvince:用户所在省份
      userCountry:用户所在国家
      userLanguage:用户的语言

多页面的跳转
    "pages": [
     "pages/home/home", 
     "pages/second/second"]
     排在第一位的页面,就是小程序打开时,默认展示的页面。
  <navigator> 使用组件进行页面跳转
    就是链接标签,相当于网页标签<a>,只要用户点击就可以跳转到url属性指定的页面
  wx.navigateTo() 使用脚本方法进行页面跳转

空文件

简介

微信小程序的入门知识 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/chillyCUI/wechat-miniprogram-demo.git
git@gitee.com:chillyCUI/wechat-miniprogram-demo.git
chillyCUI
wechat-miniprogram-demo
wechat-miniprogram-demo
master

搜索帮助