从零新建小程序

一:项目生成

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

如下图:

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

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

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171229G0Q6Y200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券