从零开始:微信小程序新手入门宝典

为了方便大家了解并入门微信小程序,特将可能会需要的知识,列在这里,让大家方便的从零开始学习

一:微信小程序的特点

张小龙:张小龙全面阐述小程序,推荐通读此文;

小程序是一种不需要下载、安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即开打开应用,也出现了用完即走的理念,用户不用关心安装太多应用的问题,应用随处可用,但又无须安装卸载。我当时是这样来定义什么是小程序的。

1:无需下载:我们直接使用它,所以无须安装是小程序最基础的一个特性;

2:触手可及:当我们拿着智能手机接触周边的时候,我们可以通过手机直接获得信息,就是周边的信息;

3:用完即走:对于周边要完成的任务来说我们需要的是用完即走;

4:无须卸载:小程序看起来是程序,但是它以完全不同于过去APP的形状出现,它有更灵活的应用组织形态;

二:微信小程序官方地址

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/

设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html;在这里查看如何符合设计标准,仅供参考,非强制性;

运营规范:https://mp.weixin.qq.com/debug/wxadoc/product/index.html;在这里查看禁止事项

接入指南:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html

支付文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

客服消息:https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html?t=20161221   8:特殊行业所需资质材料:https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714

数据分析:https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714

三:如何学习微信小程序

多看官方文档,多看几遍,遇到问题时再看,没有问题时继续看;

1、首先要通读一遍官方文档,看看都有哪些东西,都能干什么;

2、对感兴趣的部分,把例子抠出来放到IDE上面运行一下,运行没问题就自己折腾折腾例子

3、自己写个demo,遇到困难当然就来小程序联盟啦,找找看有没有类似的demo

4、每天进论坛看看有什么新帖子

我觉得基础知识一定要过关!!!

事件绑定 ajax请求 本地存储之类 先搞清楚小程序之外是怎么实现的

遇到问题 看文档,看不懂第二遍,再不行 啥时候看懂再开始做

如果你在群里发问没人理你,不是大家都解决不了就是你问的问题别人根本不想理

百度,谷歌 ,bing
别一直就放着,用起来

还有最重要的一点 不要眼高手低,人家的demo下载下来跑起来 然后看懂之后一定要自己尝试写一遍!

正常思路啊 首先是静态页面数据展示  然后是页面跳转  然后就会考虑带参数实现详情页面 然后。。。

找一个熟悉的逻辑 开始模仿 然后就会一步步往前走了

多走弯路才能少走弯路

四:个人开发前必读

个人开发和学习的同学,最关心的是个人额能不能申请和发布,目前的答案是:不能发布,但是可以开发;

1:申请Appid:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495

拥有appid后,即可开始真机预览;本方法仅用于测试和研究,无法认证和审核,请勿申请认证;

2:如何真机预览:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1812

3:如何设置体验者/开发者/体验版本/:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1248

4:快捷键列表:

格式调整

  • Ctrl+S:保存文件(必须保存才可以看到效果
  • Ctrl+[, Ctrl+]:代码行缩进
  • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  • Shift+Alt+F:代码格式化
  • Alt+Up,Alt+Down:上下移动一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  • Ctrl+Shift+Enter:在当前行上方插入一行
  • Ctrl+Shift+F:全局搜索

光标相关

  • Ctrl+End:移动到文件结尾
  • Ctrl+Home:移动到文件开头
  • Ctrl+i:选中当前行
  • Shift+End:选择从光标到行尾
  • Shift+Home:选择从行首到光标处
  • Ctrl+Shift+L:选中所有匹配
  • Ctrl+D:选中匹配
  • Ctrl+U:光标回退

界面相关

  • Ctrl + \\:隐藏侧边栏
  • Ctrl + m: 打开或者隐藏模拟器

五:新手学习可选系列:任选其一即可;

开发详解系列:

程序员实战系列

学习记录系列

七:如何解决学习过程中的问题

1:看文档,尤其是版本更新后,可能文档已经更新,附上了你问题的说明;

2:常见错误及基本排除方法

1:ES6;使用es6可能导致安卓端真机调试时很多问题出现,还有其他未知问题;原因未知;

2:字母拼错,包括字母拼写错误,大小写没有注意;微信小程序中,有大量这样的代码示例,从中间冒出一个大写,比如支付中的appId

3:官方文档示例代码有误,有时官方文档示例代码也会出现问题,比如大小写出错,或者其他缺少参数等问题;

4:https,这个坑目前遇到的人最多,首先说明一下,工具的这个设置, ,这个设置有一些独特的作用,让你可以让本地避开一些限制;但是这个设置对真机无效,所以假如存在https问题,是否勾选并影响;仍然需要按贴排查:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648

8:重启/重装工具大法:有时候编辑器会出现一些莫名其妙的BUG,比如昨天还是好的,今天打开各种问题等等,可以考虑重新编译或多次重启工具或重启电脑;

10:前人经验:有很多人遇到了很多问题,你可以在版块的问答分类下看看其他人遇到的问题及如此解决的;http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&page=2&filter=author&orderby=dateline&typeid=16

11:无法登陆:参考@M-信念 同学的建议:可以稍微等等;当出现帐号登陆问题时,可以尝试使用他人微信号,或是咨询其他人是否也遇到了相同的情况,不要着急;

12:代理设置;代理设置应该是一个隐藏比较深的坑,但是很多人被坑过,假如你的机器设置了代理,开发者工具可能会也跟着默认带来代理,然后会接踵而来很多登陆,空白等问题;

13:使用搜索;现在本站聚合了大量的微信小程序相关内容,可以考虑使用本站的搜索,来获取自己想找的东西或用于解决问题,搜索时,请使用主要关键词,或相近关键词进行搜索,而不要直接搜索一句话,比如你需要appid,你可以搜索“appid”,你遇到了登陆问题,应该搜索“登陆”,真机预览遇到了问题,可以搜索“真机”,遇到了上传问题,可以搜索“uploadfile”

14:微信版本问题,伴随微信的版本更新,不同的微信版本之间可能会出现不同的未知BUG;你可以在这里查看最新微信版本:weixin.qq.com

时间: 2024-10-15 04:46:23

从零开始:微信小程序新手入门宝典的相关文章

.NET教程:微信小程序基础入门

.NET教程:微信小程序基础入门 准备 Demo 项目地址 (https://github.com/zce/weapp-demo) Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 (https://github.com/zce/

新手入门:微信小程序--从入门到精通宝典

<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家.大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的内容去学习.希望大家在这里能快速成长,成为微信小程序开发的顶尖高手. 本帖的内容结构如下:一:小程序之张小龙全面阐述及思维导图:二:微信小程序官方地址三:如何学习微信小程序四:新手入门系列教程集合五:公司开发前必读六:个人开发前必读 一:小程序之张小龙全面阐述及思维导图: 小程序之张小龙全面阐述:于1月9日上线(

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了. WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 至于标题,请原谅我,我标题党了. Word

微信小程序开发入门与实践

基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(View)和逻辑层(App Ser

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发入门首选

推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着.

微信小程序开发入门

微信小程序 首先说下结构吧,看看小程序到底长什么样子 这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择iPhone各种型号或者安卓各种型号,在往后这就是目录结构了. 先说一下小程序的代码结构吧,首先他的app service 至少由这三个文件组成,app.js,这个是脚本代码,App()函数就在这里面实现,可以监听处理小程序的生命周期函数,声明全局变量.app.json json文件这个一般都是对程序

微信小程序开发入门(一),Nodejs搭建本地服务器

1.  如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下来就需要安装http的镜像文件 npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)接下来在桌面创建一个文件夹 cd 文件夹名字http-server这时候,就会显示在8080端口下运行的一个本

微信小程序基础入门

准备 Demo 项目地址 https://github.com/zce/weapp-demo Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 安装开发环境 下载地址 Windows 64位 Windows 32位 macOS 安