7-2 微信小程序入门篇

准备篇

1.登录网址,https://mp.weixin.qq.com  注册一个微信小程序。

2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid。

3.下载微信开发者工具,创建项目。输入appid,和项目名即可。

4.js是脚本文件, json是配置文件,wxss是样式表文件。小程序读取这些文件,生成小程序实列。

5.app.js是小程序的脚本代码,儿科与你监听并处理小程序的生命周期,声明全局变量。
调用框架提供丰富的API 案列,调用同步存储服务和同步读取本地数据。
APP({
onLaunch:function(){
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs',logs)
},
getUserInfo:function(cb){
var that = this;
if(this.globalData.userinfo){
typeof cb == "function" && cb(this.globalData.userinfo)
}else{
wx.login({
success:function(){
wx.getUserInfo({
success:function(res){
that.globalData.userinfo = res.userinfo;
typeof cb == "function" && cb(that.globalData.userinfo)
}
})
}
});
}
},
globalData:{
userinfo:null
}
}) 6.app.json是对整个小程序的全局配置,页面组成,窗口背景色,导航条样式,默认标题等。
这个文件不可添加任何注释。 {
"pages":[
"pages/index/inex",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"haha",
"navigationBarTextStyle":"black"
} } 7.wxss是整个小程序的公共样式表。可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。 .container{
height:100%;
display:flex;
flex-direction:column;
} 8.页面?
每个页面都要写在app.json的pages中,第一个页面时小程序的首页。
每个页面是由同路径下同名的四个不同后缀文件的组成。 index.js 页面的脚本文件,监听处理页面的生命周期函数,获取实列,声明并处理数据。响应页面交互事件。
// 获取应用实列
var app = getApp() onLoad:function(){
console.log('onLoad')
var that = this
//调用应用实列的方法获取全局数据
app.getUserInfo(function(userinfo)){
//更新数据
that.setData({
userInfo:userInfo
})
}
} index.wxml 页面结构文件。
index.wxss 页面的样式规则会覆盖app.wxss中的样式规则。
index.json 页面的配置项会覆盖app.json中的相同配置项。

微信小程序笔记整理--入门篇。的更多相关文章

  1. 微信小程序开发之入门篇(熟悉开发工具)

    个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...

  2. 微信小程序开发之入门篇(熟悉项目结构)

    微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在. app.js是小程序的脚本代码.我们可以 ...

  3. 使用wepy开发微信小程序商城第三篇:购物车(布局篇)

    使用wepy开发微信小程序商城 第三篇:购物车(布局篇) 前两篇如下: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 基于上两篇内容,开始 ...

  4. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  5. 新人学习微信小程序开发之框架篇

    大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...

  6. 微信小程序资源整理

    微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...

  7. 微信小程序教程(第二篇)

    如何注册接入小程序及搭建开发环境 小程序接入流程 注册 主要分为注册邮箱与信息登记. 需要重新申请一个新的微信公众帐号,不能使用服务号.订阅号或企业号使用的公众帐号 (微信公众帐号分为四种类型:订阅号 ...

  8. 微信小程序教程(第一篇)

    目录 第一篇小程序概述 第二篇如何注册接入小程序及搭建开发环境 第三篇小程序的架构及实现机制,信道服务及会话管理 第四篇小程序开发基本框架及其限制与优化 第五篇小程序开发项目实例,测试及发布 .... ...

  9. 微信小程序开发框架整理

    目前除了原生的微信小程序开发外,各大厂商陆续造了自己的开发框架,现整理如下: WePY 腾讯官方开源的小程序组件化开发框架,目前有15K+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来 ...

随机推荐

  1. 【LeetCode】376. Wiggle Subsequence 解题报告(Python)

    [LeetCode]376. Wiggle Subsequence 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.c ...

  2. 【剑指Offer】52. 两个链表的第一个公共节点 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 方法一:栈 方法二:HashSet 方法三:不使用额外空间 日期 ...

  3. ZYB loves Xor I(hud5269)

    ZYB loves Xor I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. Problem 2236 第十四个目标

    Problem 2236 第十四个目标 Accept: 4    Submit: 6Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem D ...

  5. ZooKeeper基础知识总结

    数据模型 ZooKeeper数据模型是一个树状的数据结构,类似于文件系统:和文件系统的区别在于树中的每一个节点(叶子节点与非叶子节点)都可以保存数据,且每个节点的访问都必须从根节点开始,以斜线作为分隔 ...

  6. 【优雅代码】03-optional杜绝空指针异常

    [优雅代码]03-optional杜绝空指针异常 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...

  7. Java基础(八)——IO流3_对象流

    一.对象流 1.序列化与反序列化 序列化:将内存中的Java对象保存到磁盘中或通过网络传输出去. 反序列化:将磁盘文件中的对象还原为内存中的一个Java对象. 用途: (1)将对象保存到物理硬盘:比如 ...

  8. Jenkins_创建任务以及定时启动(2)

    一.创建任务 1.点击New Item 2.输入用户,单击Freestyle project,点击OK 3.填写构建步骤,因为是安装在linux上的,所以我们选择Execute shell,随意输入一 ...

  9. python 单下划线与双下划线的区别

    来自为知笔记(Wiz)

  10. BugKu CTF(杂项篇MISC)-贝斯手

    打开是以下内容 先看一下给了哪些提示 1.介绍 没了?不,拉到最底下还有 2.女神剧照 密码我4不会告诉你的,除非你知道我的女神是哪一年出生的(细品) 大致已经明白了,四位数密码,出生年份 文件是以下 ...