Hello 微信小程序

微信小程序简介
开始
代码
- 文件类型
- 代码构成
- 页面构成
样例程序
- 界面操作
- 代码阅读
- - 根目录
  - - app.js
    - app.json
    - app.wxss
  - index页面
  - - index.wxml
    - index.js
小结

微信小程序简介

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。 ----摘抄自百度百科
（特别说明，下文中所有的小程序均为微信小程序的简称。）

开始

要想进行小程序对开发，首先需要到腾讯微信公众平台上进行注册，并到小程序开发工具官网上下载相应的开发工具。此外，开发工具界面的相关说明也可在小程序开发工具官网上找到。

代码

文件类型

小程序开发工具目前提供了五种文件的编辑，分别为：wxml（类似于html），wxss（类似于css），js，json，wxs（类似于js）。

代码构成

app.js。该文件用来调用App方法注册小程序实例，绑定生命周期函数，错误监听和页面不存在监听函数等。该文件具有唯一性，并被所有页面共享。可将该文件视为小程序的入口
app.json。该文件为当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab等。
app.wxss。该文件为小程序的全局样式，作用于每个页面。但是该文件中的样式会被页面的局部样式所覆盖。
project.config.json。该文件为工具配置文件，可以在此文件中进行个人的个性化设置，并当持有该文件时，小程序开发工具会按照该文件进行配置。
sitemap.json。该文件用来配置小程序及其页面是否允许被微信索引。

页面构成

.js。每个页面中，该后缀的文件为页面的逻辑。
.wxml。每个页面中，该后缀的文件为页面的结构。
.json。每个页面中，该后缀的文件为页面的配置。
.wxss。每个页面中，该后缀的文件为页面的样式表。

样例程序

在小程序的开发工具中，给出了一个最简单的小程序样例。结合上述内容，我们对这个样例程序进行学习。

界面操作

该小程序十分的简单，但又比较的完整。总的来说，这个小程序的功能就是，向微信发出申请，并获得微信用户的头像和昵称。

初始界面。
2.点击获取头像昵称按钮后进行权限申请。

3.点击允许后的界面。

代码阅读

由上述内容可知，一个小程序的开始是从app.js开始，故首先对app.js所完成对功能进行描述。

根目录

app.js

该文件主要完成了三个功能，1. 使用本地储存功能来对数据进行储存。2. 使用登陆功能来对小程序进行登陆。3. 完成对用户信息的获取。下方给出包含官方注释和个人注释的代码。

//app.js
App({onLaunch: function () {// 展示本地存储能力// 读取本地(Storage)中的logs，有则返回'logs'对应的值，无则返回[]var logs = wx.getStorageSync('logs') || []// 向logs数组的头部添加Date.now数据logs.unshift(Date.now())// 将logs存入本地(Storage)中，'logs'为key，logs为值wx.setStorageSync('logs', logs)// 登录// 该函数可以获取微信登陆的临时凭证code，并回传到开发者服务器// 小程序开启后自动调用wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdif (res.code) {console.log('hello')} else {console.log('登陆失败'+res.errMsg)}}})// 获取用户信息// 获取用户的当前设置wx.getSetting({// 接口调用成功的回调函数success: res => {// res.authSetting可以对一下功能进行授权申请// 用户信息，地理位置，微信步数，录音功能，保存图像，摄像头if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框// 获取用户信息wx.getUserInfo({// 接口调用成功的回调函数success: res => {// 可以将 res 发送给后台解码出 unionId// this.globalData为app.js的全局变量this.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况// this.userInfoReadyCallback为app.js的全局变量if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null}
})

app.json

该文件主要对小程序的页面，窗口等进行了配置，下方给出添加上注释的代码。

{// 该小程序所包含的所有页面// index表示打开小程序时首先呈现的页面// pages的内容为小程序页面的路由信息"pages":["pages/index/index","pages/logs/logs"],"window":{// 下拉 loading 的样式，仅支持dark/light"backgroundTextStyle":"light",// 导航栏背景颜色"navigationBarBackgroundColor": "#fff",// 导航栏标题文字内容"navigationBarTitleText": "Weixin",// 导航栏标题颜色，仅支持black/white"navigationBarTextStyle":"black"},// 启用新版的组件样式"style": "v2",// 单页模式相关配置"sitemapLocation": "sitemap.json"
}

app.wxss

该文件为小程序的全局样式，下方给出添加上注释的代码。

/**app.wxss**/
// 定义全局container控制器的样式
.container {// 设置高度比例height: 100%;// 使用flex布局方式display: flex;// 将内容垂直显示，即每列一致flex-direction: column;// 使元素位于容器中间align-items: center;// 容器中的元素之间留有空白justify-content: space-between;// rpx是可以根据屏幕宽度进行自适应的单位padding: 200rpx 0;// 设定元素的边框box-sizing: border-box;
}

index页面

index页面具有四个文件，由上述内容可知，.js文件为逻辑文件，.json为配置文件，.wxml为页面结构文件，.wxss为页面样式文件。

index.wxml

页面的结构文件，代码如下。

<!--index.wxml-->
<view class="container"><view class="userinfo">// 判断!hasUserInfo && canIUse是否为true// open-type:微信开放能力.// 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息// bindgetuserinfo:用户点击该按钮时，会返回获取到的用户信息<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else>// 否则直接加载用户的头像信息和用户名称// bindViewTap为点击头像时的时间处理函数<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

index.js

该文件主要处理index页面的相关逻辑，代码如下。

//index.js
//获取应用实例
const app = getApp()Page({// data中的变量为整个page都可以使用的变量data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,// canIUse: 判断小程序的API，回调，参数，组件等是否在当前版本可用canIUse: wx.canIUse('button.open-type.getUserInfo')},//点击头像后的事件处理函数bindViewTap: function() {// 使用导航模式跳转到logs页面// 这里的url路径是相对路径wx.navigateTo({url: '../logs/logs'})},// 生命周期函数onLoad: function () {// 从app中加载globalData变量的数据if (app.globalData.userInfo) {// 双向绑定，用来更新数据this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 如果未申请到权限，则点击按钮申请// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},// 获取个人信息的回调getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})

小结

这是第一篇关于学习微信小程序的小记录，因为我也在积极的学习中，若有错误，希望大佬们指出。之后会陆续更新我的学习历程，谢谢阅读。

Hello 微信小程序相关推荐

微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
微信小程序import和include
import 和include 是微信小程序提供的2中引用方式 import 一般结合模板template使用 import import可以在该文件中使用目标文件定义的template,如: 在 i ...
微信小程序扫描二维码
最近官方地址看到这句话我想到了,微信小程序是调用微信的扫一扫那么扫一扫的界面就可以不用再写了, 想到android这边都是用图片或者手动画,突然感觉心情特别的好, 里面的参数自己看吧,看到最下面的 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
map和foreach的区别和应用场景_支付宝小程序和微信小程序，两者有何区别？
原标题:支付宝小程序和微信小程序,两者有何区别? 自2017年1月微信推出小程序之后,小程序的发展势头便愈来愈猛.作为腾讯老对头的阿里,也开始投入小程序的研发.在一年多的开放公测后,支付宝小程序终于于 ...

Hello 微信小程序

Hello 微信小程序

微信小程序简介

开始

代码

文件类型

代码构成

页面构成

样例程序

界面操作

代码阅读

根目录

app.js

app.json

app.wxss

index页面

index.wxml

index.js

小结

Hello 微信小程序相关推荐

最新文章

热门文章