从零新建小程序

一:项目生成

自行下载微信开发者工具-打开微信开发者工具

如下图:

项目:就是项目要存的位置。

AppID:企业级需(小程序申请成功的时候会有这个,个人的不用填写,只是最后不能发布到线上)。

项目名称:demo1(可以根据自己需要起名字)

建立普通快速启动模板(就是快速生成一个小项目)

------点击确定

二:项目预览

确定之后显示的界面如下图

2-1 界面分析

2-2 项目目录

2-21 那么简单的界面,相信你用html分分钟就写好了吧,而且保证目录结构清晰。

2-22

两个文件夹 pages和utils和这两个文件夹同级别的文件有4个

细心的你可能已经看到pages下面还有两个文件夹这两个文件里的文件类型有四种

.json 配置文件

.wxml 模板文件,功能同html

.wxss 样式文件,功能同css

.js 脚本逻辑,功能同javascript

那么同pages同级的几个文件就不难理解了,为什么里面和外面都有呢?如果index和logs文件中的文件是局部的,那么是不是外部的这些文件是代表全局的,答案是肯定的。

2-3 源码分析

2-31 先看全局的吧

2-311 app.js

//app.js

App({

onLaunch:function() {

// 展示本地存储能力

varlogs = wx.getStorageSync('logs') []

logs.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

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

if(this.userInfoReadyCallback) {

this.userInfoReadyCallback(res)

globalData: {

userInfo:null

}

})

一个方法 传入了一个对象,对象中包含了一个方法一个对象,onLaunch和globalData

onLaunch 这个方法是在小程序项目启动的时候就会执行的。

执行了什么呢?

获取用户信息,然后将用户信息存入全局变量

globalData 很好理解,将userInfo存为全局变量,给不同的页面来调用,类似js中的全局变量。

2-312 app.json

{

"pages":[

"pages/index/index",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"WeChat",

"navigationBarTextStyle":"black"

}

}

pages:存的所有页面路径,其中第一个是小程序打开之后就会显示的页面

window:这个呢就是小程序所有页面的顶部字体样式,背景颜色,显示的文字,文字颜色

2-313 app.wxss

/**app.wxss**/

.container{

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:space-between;

padding:200rpx;

box-sizing:border-box;

}

container 类设置了样式,高度,flex 布局 padding box-sizing

{

"description":"项目配置文件。",

"setting": {

"urlCheck":true,

"es6":true,

"postcss":true,

"minified":true,

"newFeature":true

},

"compileType":"miniprogram",

"libVersion":"1.6.6",

"appid":"************",

"projectname":"demo1",

"condition": {

"search": {

"current":-1,

"list": []

},

"conversation": {

"current":-1,

"list": []

},

"miniprogram": {

"current":-1,

"list": []

}

}

}

关于项目配置的一些信息,appid 其实是显示出来的

2-4 首页页面源码

2-41 index.html

是不是很奇怪,为什么是view block text button images,这些其实是小程序将我们的html标签封装了之后的标签,来来来翻译一下,

view类似我们最熟悉的div没有默认样式,块级元素

text类似最熟悉的span行内元素,也没有默认样式

button类似html中的button,也有自己默认的样式,有坑要去掉他的边框需要用 button:afater

images类似html中的img 不过这个images有默认宽高还挺大。

{{}}如果你之前了解过vue 或者angular 那么对于这种写法就不陌生了,就是js中的数据想要在页面中渲染出来,需要用{{}}这个标示解析一下。

wx:if就是条件为真 这个if所在的盒子就显示出来,否则就不显示,没有深究是display属性还是通过移除元素来操作的。

bindtap这个就是绑定单击事件来用的,事件调用的方法不可以加() 直接写函数名就好,那如果想传参数怎么办?这个需要用小程序的自定义属性传参数,然后在js里面接收,好麻烦,不过没办法~~~

2-42 index.wxss

和css一样一样的,选择器之前怎么用,这里就怎么用。。。。。

2-43 index.js

//index.js

//获取应用实例

constapp = getApp()

Page({

data: {

motto:'Hello World',

userInfo: {},

hasUserInfo:false,

canIUse: wx.canIUse('button.open-type.getUserInfo')

},

//事件处理函数

bindViewTap:function() {

wx.navigateTo({

url:'../logs/logs'

})

},

onLoad:function() {

if(app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo:true

})

// 由于 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

})

}

})

是的你没有看错,所有数据你都需要些在page这个方法所传入的对象里面

data:变量类型可以是js的变量类型的值

bindviewtap:就是绑在元素上的事件所要调用的方法

它是做了页面跳转,路径些在url里面

onLoad: 该页面首次加载的时候调用一次,如果你跳转之后再跳转回来那么该function就不会再执行了,记住,如果你想要每次进入该页面都跑一遍的代码,千万不要放在这里。

app.globalData.userInfo这个就是在app.js这个全局js文件中定义的变量需要用这方法去取,那么在当前data中的数据怎么取呢,需要这样 this.data.变量名

那么如果想更改data中的数据怎么办?用this.setData({'变量名':'值'})

用惯了vue的,会感觉这个还真是有点不顺手。。。

同样的方法,自己琢磨logs页面。

结语:从小程序项目生成到简单的源码分析,可能你对小程序已经有了初步的了解,但是要还是自己试一试~

如果你在小程序的项目中遇到了什么坑,欢迎一起交流。

本文来自企鹅号 - 葡萄C媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

「小程序JAVA实战」 小程序wxss样式文件的使用(七)

PS:样式这块比较依赖html中的css,明白如何引用,关联关系,style的方式自定义样式。

12430
来自专栏IMWeb前端团队

jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 calendar-price-jquery 基于Jquer...

31250
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

36450
来自专栏高爽的专栏

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,Java...

24700
来自专栏Python

linux每日命令(11):cat命令

cat命令的用途是连接文件或标准输入并打印。这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用。

10030
来自专栏Android小菜鸡

解决H5在IOS的WebView下上拉下拉会带动整个WebView出现空白

做Web应用,碰到问题,当拖动页面的时候,IOS的整个WebView会被拖动,导致上下方有灰色空白出现,并且影响内部滑动的体验。 在网上找了个神秘代码,大概意...

1.2K40
来自专栏PPV课数据科学社区

【工具】一个投行工作十年MM的Excel操作大全

>移动到当前数据区域的边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作表的开头:CTRL+HOME 移动到工作表的最后一个单元格。:CTRL+END ...

29940
来自专栏听雨堂

数据绑定应当注意的一个白痴问题

就是在页面中绑定时,假如被绑定的内容要写到双引号之中时,有时会报错。 <%#DataBinder.Eval(Container.DataItem, "FName...

206100
来自专栏更流畅、简洁的软件开发方式

页面回发后,让页面自动滚动到指定位置的一种简单的方法

最近某客户做实施,顺便完善一下程序。突然找到了一个老问题的解决方法。 就是当用户按一个按钮后,希望回发后的页面滚到一个指定的位置,而不是页面的开头部分。以...

37870
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

13420

扫码关注云+社区

领取腾讯云代金券