微信小程序之注册和入门

一、注册

首先,在微信公众平台mp.weixin.qq.com上注册一个帐号。

小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发。

这里不写太详细,请查看 https://jingyan.baidu.com/article/4e5b3e192a33da91911e2455.html

注册完了跳转到以下页面,

补充信息,然后下载工具安装;

可以不用添加开发者,自己就是了;

二、开发入门

1.创建一个项目

登录成功后,如果是第一次使用该工具会弹出创建项目的窗口,需要填写appId

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

2.项目代码结构解释

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。

最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。

其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

(1)app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

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

(3)app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

(4)在实例程序的代码中还有2个文件夹,一个是pages,一个是utils, 其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。

3.小程序页面文件构成

在这个示例中,有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。

微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json;

.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

? index.wxml 是页面的结构文件:

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

本例中使用了<view/><image/><text/>来搭建页面结构,绑定数据和交互处理函数。

? index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

? index.json 是页面的配置文件,?是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

参考文章:http://www.cnblogs.com/niejunchan/p/5918855.html

时间: 2024-11-10 01:14:31

微信小程序之注册和入门的相关文章

微信小程序开发者注册流程

一,首先打开浏览器,搜索微信公众平台 点击进入,此时还没有注册微信小程序开发账号,我们需要点击注册 进入注册页面,会出现四种账号,我们选择小程序账号 然后根据提示就可以进行注册了 注册时,需填写一下个人相关信息 填写完毕就注册好了 要开发小程序还需要对小程序进行一些信息填写 在完成这些任务之后,我们就可以进行小程序开发了 记得好用点击推荐收藏-_-

我的微信小程序第一篇(入门)

前言 微信小程序出来已经有一段时间了,已经有很多大牛都写过相关教程了,那么我为啥还要写这篇文章呢?其实仅仅是个人对微信开发的一个兴趣吧,觉得是个很有意思的事情,后面有时间可能会发更多关于小程序的文章,刚刚接触,如果哪里写的有问题欢迎大家指正. 准备工作 首先需要下载微信小程序开发者工具 点击链接: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN进入微信公众平台技术

微信小程序之菜鸟选手入门教学(一)

1. 小程序的优缺点优点:不需下载.卸载 使用方便缺点:嵌套在微信中,属于微信的子应用2. 使用的技术实际上是Hybrid技术的应用Hybrid App (混合模式移动应用),使用网页语言和程序语言共同开发小程序兼具了Native App所有优势,也兼具了Web App使用Html5跨平台开发低成本 注:微信小程序与传统app没有相互取代的可能,它们是相辅相成的 3. 主要用到的技术WXML——对Html5进行了简单的封装,并且去掉了一些微信小程序中用不到的标签WXSS——对CSS进行了简单的封

完整且易读的微信小程序的注册页面(包含倒计时验证码、获取用户信息)

目录 1.页面展示 2.wxml代码 3.wxss代码 4.js代码 1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id=

微信小程序 app注册小程序+page注册页面代码一

注册小程序代码:app.js //app.js App({ onLaunch: function(){ var log = wx.getStorageSync("logs") || [] log.unshift(Date.now()) wx.setStorageSync("logs", log) wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } })

微信小程序开发教程目录

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息

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

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

不走弯路,微信小程序的快速入门?

微信小程序下载注册地址:https://mp.weixin.qq.com/cgi-bin/wx 微信小程序登开发者平台地址(可以查看小程序APPID):https://mp.weixin.qq.com 微信小程序简易官网:https://developers.weixin.qq.com/miniprogram/dev/ 小程序登陆开发者账号: 密码: 开发者工具登录:填写AppID,微信确认,进行个人项目开发: 开发者工具下载版本与介绍:https://developers.weixin.qq.

学习微信小程序系列(1) 如何注册微信小程序

目录 前言 什么是微信小程序 如何注册微信小程序 前言 去年,有一段时间,因为工作的需要,需要进行微信小程序的开发工作.刚开始接触的时候,说真的.真的5脸懵逼.工作总是这么无奈,硬生生的逼着自己从不想学,不想写.到最后,逼着自己完成了整个小程序的前后端的开发工作.又过了一段时间,再翻开回自己曾经写的代码.简直是不堪入目.于是,我又认真的学习了一下有关微信小程序的相关的基础础.ps:趁着自己脑子还行,强行mark自己是如何学习小程序的心路历程.希望,对初学者有所帮助. 什么是微信小程序 孔子都说,