hello-weapp 微信小程序最简示例教程

  • 添加项目,没有app id就选择无AppID, 勾选在当前目录中创建quick start项目，直接有个简单的示例,

  • AppID 是微信开发者官方授权开发者的一个凭证， 目前只有200家受邀内测的公众号才有，所以咱们就通过无AppID开发调试吧！主要限制如下：

  • 然后点击添加项目即进入具体项目的开发环境 
  • 我们先看看目前有的文件目录，点击左侧 编辑 按钮 打开所有文件目录

  • 查看文件目录说明

    注意：为了方便开发者减少配置项，微信规定描述页面的这四个文件必须具有相同的路径与文件名。这个很关键，不能随意创建目录以及文件与页面关联 

  • 从官方文档得知 ，必须有的几项  
  • 最简示例至少有一个简单的页面，所以，接下来我们删除一些文件来看最简示例的项目结构吧！
  • 先删除多余目录以及文件剩下，如下文件，

  • 这时候，点击左下角的编译按钮，可以看到控制台大大的报错了，一看便知是少了logs这个目录，因为刚刚被删除了， 
  • 那我们去 app.json配置项中找到页面配置去除多余内容吧

  • 剩下这样的应用配置 
  • 点击编译，清除控制台可以看到没有报错了，

  • 点击编辑，打开 /pages/index/index.wxml 文件

  • 改成下面这样

  • 点击编译，ok最简示例hello weapp 完成了

  • 其中wxml的写法可以看 官方组件文档，接着尝试各种吧！
  • 微信小程序中不能直接使用html，必须严格使用官方的组件库来开发页面显示，并且微信小程序中没有window和document对象，自然类似jquery/zepto 都是无法使用的 
  • 如果要问ajax怎么办？微信自然帮我们实现了一个接口来做数据通信的事情，请看这里

  • ok 了，可以开始进一步熟悉微信小程序每一个组件和API来做应用了。
  • 微信小程序开发交流群563752274
时间： 2024-08-08 13:59:20

hello-weapp 微信小程序最简示例教程的相关文章

微信小程序「官方示例代码」剖析【下】：运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的--就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码--真想建议他们看看Growth的第二部分,构建系统. 解压应用 首先你需要有下面的工具啦 Mac电脑 微信web开发者工具.app WebStorm / 其他编程器 或 IDE,最好可以支持重命名 首先,我们需要右键微信web开发者工具.app,然后显示包的内

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

微信小程序开发的入门教程

广州微信小程序开发公司(www.dthulian.com)品向科技,下面跟大家详细介绍微信小程序开发的入门教程: 开发前准备: 注册小程序帐号 绑定开发者 登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者. 已认证的小程序可以绑定不多于20个开发者.未认证的小程序可以绑定不多于10个开发者. 获取AppID下载并安装开发者工具 下载完成后,使用管理员或者绑定的开发者微信号扫码登录. 一个微信小程序 创建项目 我们需要通过开发者工具,来完成小程序创建和代码编辑. 开发者工具安装完成后

完整微信小程序授权登录页面教程

完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路 在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&

微信小程序「官方示例代码」浅析【上】

从某个微信群里,拿到了这个IDE的下载地址,然后就有了这个: 根本登不上去,怎么办,怎么办呢? 看代码啊... 反正我又没有保密协议,解压缩一看NodeWebkit + React: 好啦 ,逛逛呗,这真是一个庞大的项目: 等等,这里有一个目录是 weapp/quick,这难道就是传说中的源码,打开一看,果然是.. 好了,毫无疑问,某讯又故计重演. html -> wxml css -> wxss app.js里面是登录代码: app.json定义了一些样式,和页面: wxss里面,明显就是c

weapp微信小程序初探demo

https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

超详细，用canvas在微信小程序上画时钟教程

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟, 首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html 和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp 我觉得其实除了删减一些内容之外没什么太大的区别 直接贴代码: wxml <!--index.wxml-->

微信小程序(应用号)开发教程

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码 1. 获取微信小程序的 AppID 如果你是收到邀请的开发者,我们会提供一个帐号,利用提供的帐号,登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 如果没有收到内测邀

微信小程序-tab标签栏实现教程

一.摘要 tab栏(标签切换栏)是app中常见的一种交互方式,它可以承载更多的内容,同时又兼顾友好体验的优点.但在小程序中,官方并没有为咱们提供现成的组件.因此我们程序员展现才艺的时候到了(其实市面上的ui库也做了这个组件).今天咱们就来实现一个对用户更加友好的tab栏,让用户“一点”就停不下来,起到解压的功效~~! 废话不多说,先上效果图. 不瞒您说,这东西我能点一天^^.言归正传,由于tab栏用的地方很多,所以需要封装成组件,因此没有开发或者没用过组件的同志请瞧一瞧官方文档.我之前也写过一篇