第一步

准备工作

下载腾讯官方的微信web开发工具并且安装

第二步

登录已经注册小程序的微信账号并且选择合适的路径新建小程序项目。

新建一个页面文件夹,每一个页面需要一个文件夹,里面包括写逻辑脚本的js文件。写页面的wxml文件,写样式的wxss文件,写配置的json文件。

新建的文件夹以及文件名保持一致

index.js文件

可以绑定数据,访问

 //index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数 访问页面入口
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
bindmogui: function () {
wx.navigateTo({
url: '../sun/sun'
})
},
onLoad: function () {
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.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
 <!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<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" bindtap="bindmogui">{{motto}}</text>
</view>
</view>

index.wxml是页面文件,view可以看做是容器div,里面可以绑定数据,绑定的数据可以在同文件夹下的js文件里定义。

bindtap可以绑定js文件里面的事件,和onclick差不多。class在wxss里面定义。

/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
} .userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
} .userinfo-nickname {
color: #aaa;
} .usermotto {
margin-top: 200px;
}

所有要用到的页面需要在app.json里面注册,输入正确的文件夹位置。app.wxss定义小程序整体的样式,宽高。

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/sun/sun"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

微信小程序零基础制作指南的更多相关文章

  1. 微信小程序如何开发制作

    微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...

  2. 微信小程序开发基础

    前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...

  3. 微信小程序高级基础

    微信小程序高级基础 微信小程序的注册和服务器配置: 小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用, ...

  4. 微信小程序入门基础

    微信小程序入门基础  视频教程(https://edu.csdn.net/course/detail/8456?pre_view=1) 第一章.认识小程序  1.工具的下载与安装  2.小程序代码构成 ...

  5. 规范抢先看!微信小程序的官方设计指南和建议

    基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支 ...

  6. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  7. 微信小程序之基础入门

    微信小程序有几个基础的文件:js(JavaScript逻辑代码),json(页面配置),wxml(类似hthml布局),wxss(css样式) 我们使用app.json文件来对微信小程序进行全局配置, ...

  8. 微信小程序 API 基础

    其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...

  9. .NET开发微信小程序(基础配置)

    1.微信小程序的必备Model public class WxConfig { /// <summary> /// 小程序的appId /// 登录小程序可以直接看到 /// </s ...

随机推荐

  1. deepin深度学习环境配置

    deepin是一个精致优美的系统.最近因为工作需要在deepin上配置深度学习环境,话不多说,接下来记录下整个的配置过程. ×××本篇文章适合对深度学习环境配置有一定了解且对deepin系统感兴趣的同 ...

  2. Lararel安装和虚拟主机配置

    Laravel 对系统有些要求,当然,所有这些要求 Laravel Homestead 虚拟机都能满足,因此强烈推荐你使用 Homestead 作为你的开发环境. 当然,假如你不使用 Homestea ...

  3. Net core学习系列(一)——Net Core介绍

    一.什么是Net Core .NET Core是适用于 windows.linux 和 macos 操作系统的免费.开源托管的计算机软件框架,是微软开发的第一个官方版本,具有跨平台 (Windows. ...

  4. vs2015编译OBS-Studio

    编译之前的准备: 系统win10 QT5.7.0 VS2015 CMake 3.13.4 obs vs2015环境依赖包:dependencies2015 obs-studio 24.0 ====== ...

  5. redis的相关原理

    一.AOF 二.RDB 三.哨兵

  6. Spring cloud微服务安全实战-7-13章节总结

    日志信息可以放到kafka,像指标监控就可以从kafka里面拿出日志来,分析日志里面的东西,把日志里面的一些信息变成数字,比如某个关键字出现了多少次,这样的信息同样去做监控,做报警. 调用链监控也是和 ...

  7. JavaXXX成长直通车_汇总

    学习开始于2019-12-08 阶段一 阶段一-01.万丈高楼,地基首要-第1章 学习指南-1-1 课程导学 1-2是图片 阶段一-01.万丈高楼,地基首要-第1章 学习指南-1-3 大型网站架构演变 ...

  8. kafka与Rocketmq的区别

    淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介,可完全水平扩容,为了进一步降低成本,我们认为存储部分可以进一步优化,2011年初,Linkin开源了Kaf ...

  9. datatables:initComplete和drawCallback比较

    drawCallback: 对表的每个绘制事件执行操作非常有用 - 例如,您可能希望使用新显示的数据更新外部控件,或者启用服务器端处理,您可能希望将事件分配给新创建的元素.此回调旨在实现此目的,并将在 ...

  10. java enum类探索

    参考网址1, 参考网址2 一直对枚举有点迷惑,现在试着理解枚举. 1.首先,普通类与枚举 的区别.拿两个例子比较吧 普通类: /** * 一个普通类 * @author Administrator * ...