小程序初接触

1.获取微信小程序的AppID

登录 https://mp.weixin.qq.com ,可以在网站的 “设置”-“开发者设置”中,查看微信小程序的AppID了,注意不可直接使用服务号或者订阅号的AppID

2.创建项目

我们需要通过开发者工具(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html),来完成小程序的创建和代码编辑

开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。(项目里面。预览就可以在手机上查看了)

3.编写代码

创建小程序实例

点击开发者工具左侧导航栏的“编辑”,我们可以看到项目包含的文件。app.js,app.json,app.wxss是必不可少的。其中.js后缀是脚本文件,.json后缀文件是配置文件,.wxss后缀是样式表文件,微信小程序会读取这些文件生成小程序实列

app.js是小程序的脚本代码,我们可以在这个文件中监听并处理小程序的生命周期、生命全局变量。调用框架丰富的API,如本例的同步存储同步读取本地数据。更多参考API(https://mp.weixin.qq.com/debug/wxadoc/dev/api/)

//app.jsApp({  onLaunch(){    //展示本地存储的能力    const logs = wx.getStorageSync(‘logs‘) || []
    log.unshift(Date.now())    wx.setStorageSync(‘logs‘,logs)    //登录    wx.login({      success:res()=>{        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }    })    //获取用户信息    wx.getSetting({      success:res=>{        if(res.authSetting[‘scope.userInfo‘]){          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框            wx.getUserInfo({              success:res=>{                //可以将res发送给后台解码出unionId                this.globalData.userInfo=res.userInfo              }            })
        }      }    })  },  globalData:{    userInfo:null  }})

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

参考地址:https://mp.weixin.qq.com/debug/wxadoc/dev/

时间: 2024-10-27 15:25:47

小程序初接触的相关文章

【尝新】微信小程序初体验

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小demo ,样例中的文件说明如下: 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个小程序页面由四个文

不安分的android开发者(小程序初尝试,前后台都自己做)

前言 作为一个稍微有点想法的程序员来说,拥有一个自己开发,自己运营,完全属于自己的应用,应该是很多人的梦想.刚毕业那会,自己的工作是做游戏,于是也和朋友业余时间开发一些小游戏玩玩,可是终究不成气候,而且自己也只能做做单机小游戏.于是慢慢的也就失去了兴趣,尤其是自己从游戏行业转到app开发,对游戏也就没那么大兴趣了.再到后来自己买了一个windowsphone手机,当时判断windowsphone会崛起(现在看来,当时自己的眼光还是歪了,哈哈),于是呼买了一个开发者账号,自己学习c#开发,做了一个

微信小程序初体验遇到的坑

今天,2017年1月9日凌晨,微信小程序如约上线.2007年1月9日,整整10年前的今天,苹果的iPhone手机正式问世! 经不起新技术的诱惑了,想试着开发一下看看.刚开始遇到很多坑,在这里记录一下,有遇到同样坑的可以参考 1.我用的是mac版本的开发工具,运行官方demo后报错 Failed to load resource: net::ERR_NAME_NOT_RESOLVEDhttp://1351598279.appservice.open.weixin.qq.com/appservice

小程序初体验:手把手教你写出第一个小程序(一)

本文笔者将根据quick start中的范例代码,带大家简单地剖析一下小程序的运行方式,并介绍小程序开发中一些通用的特性,带着大家一步步写出自己的小程序. 适用对象:前端初学者,对小程序开发感兴趣者 tips:由于笔者也是一位前端菜鸟,所以尽量用简单直白的语言为大家讲解,如有说的不到位的地方,还望多多指教. 吊了我们一年胃口的小程序终于和大家见面了.经过了一天的发酵,小程序已经成为了今天的超级头条(汪汪哭晕在厕所). 经历了一天媒体对小程序的狂轰滥炸,相信大家对于小程序一定充满了好奇.与其跟风转

wx小程序初体验

小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716 接下来,我们要实现的小程序效果如下,源码地址:https://github.com/caiya/weapp-ywgo: 1.注册 打开微信公众平台,单击"小程序",按步骤开始注册即可,附地址:https://mp.weixin.qq.com/cgi-bin/

小程序初入门

1.到微信小程序注册用户并登记相关信息,会获得一个AppID,新建项目时填入,可以解锁更多功能. 当然不解锁一样可以开发. 2.新建好的小程序目录如下: pages里面每个文件夹是一个页面,wxml类似于html,用来展示页面: wxss类似于css,用来设定wxml里面各元素的样式:(wxss尺寸单位) js定义各种数据和wxml里面要用到的函数,和JavaScript还是有一点区别的. json是页面的配置,用来存放JSON格式的字符串. 3.如何快捷新建页面? (1)在pages下新建文件

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

[转]浅谈微信小程序

本文转自:http://www.cnblogs.com/liziyou/p/6340159.html 微信小程序 1.什么是小程序 小程序是指微信公众号平台小程序,小程序可以在微信内被便捷的获取和转播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是平行的体系. 2.小程序获取方式 一.线下扫码 小程序最基础的获取,是二维码,可以通过微信扫一扫二维码的方式进入小程序. 二.微信搜索 在微信客户端的搜索功能,输入小程序名称获取小程序 三.公众号关联 同一个的小程序和公众号可以进行关联

Android开发环境搭建与HelloWorld小程序

Android简介 一.本节知识点概述 1.Android概述 什么是Android?Android的发展. Android的四层体系架构 Android的应用开发体系 2.环境搭建resource Android集成开发环境下载与解压 Android集成开发环境目录说明 Eclipse工具的使用说明 AVD创建参数说明 启动AVD与DDMS说明 3.第一个Android项目HelloWord Eclipse中创建Android项目 Android项目目录说明 运行Android项目 4.扩展知