从零新建小程序

一：项目生成

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

如下图：

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

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页面。

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

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