微信小程序开发初体验（第二篇【HelloWorld项目】）

一、创建小程序

1、可以参考下图的信息进行创建。

为方便大家填写，信息归类如下，

• 项目名称：HelloWorld
• 目录：D:\weChatMiniProgram\HelloWorld（我在D盘创建了新文件夹weChatMiniProgram，再新建一个HelloWorld文件夹）
• AppID：注册后会有，步骤如下（截图如下），
  • 第一种：点击官网链接微信小程序🔗微信小程序——>点击“前往注册”——>点击“立即登录”——>微信公众平台微信公众平台🔗微信公众平台——>扫码登录自己的小程序管理界面——>点击“设置”到“账号信息”
  • 第二种： 点击微信公众平台🔗微信公众平台——>扫码登录自己的小程序管理界面——>点击“设置”到“账号信息”
• 开发模式：小程序，看个人需求吧
• 后端服务：不使用云服务，看个人需求吧
• 模板选择：JS-基础模板，随便选了一个，后期可以在代码中修改

二、删除部分文件

        将自动生成的项目中，删除index.json、logs、utils、.gitignore和sitemap.json文件（其中，.eslintrc.js和project.private.config.json，与模拟器启动有关，不能删）。其中，左图是删前的，右图是删后的

三、修改代码

（一）页面呈现“hello world”

1、修改index.wxml

index.wxml中已有代码全部删除，写入“hello world”

2、修改app.json

3、运行代码见本文第四部分

（二）换行操作

1、修改index.wxml

index.wxml中写入“hello world/换行/nihao”，参考下图理解

2、index.wxml中写入"<view>hello world</view>nihao",可参考下面的一张图片来理解

（三）插入图片

新建“image”文件夹，放入img01.png图片后，在index.wxml中输入“<image mode="widthFix”src="../../image/img01.png"></image>”

（四）修改字体样式

1、index.wxss中原有内容可以全部删除

2、index.wxml修改之前的“<view>hello world</view>”为“<view class="title">hello world</view>”

3、index.wxss中对title进行设置，设置成红色“.title{color:red;}”

（五）自定义显示文字

1、index.wxml修改“<view class="title">hello world</view>”为“<view class="title">hello{{wording}}</view>”

2、index.js删除后保留部分如下图

3、index.js的data中增加wording:"boy"，注意“{}”要成对出现

（六）增加按钮功能

示例一：增加“点击”按钮功能，点击后从“Hello girl”变成“Hello boy”

1、index.wxml中增加“<button bind:tap="onClick">点击</button>”

2、index.js中增加onClick的功能模块“onClick:function(){this.setData({wording:'boy'})}”，复制粘贴后注意格式修改，修改如下

示例二：点击“change”按钮功能，点击后从Hello变成“Hello mini program”

1、index.wxml中增加“<button bind:tap="onChange">change</button>”

2、index.js中增加onChange的功能模块“onChange:function(){this.setData({text:'mini program'})}”，复制粘贴后注意格式修改，修改如下

四、手机上查看效果

点击“预览”——>“自动预览”——>选择“启动手机端自动预览”——>"编译并预览"后，手机可查看效果

结语

参考微信学堂的视频课程微信开放社区，整理了这篇文章，算是帮助我自己也再回顾一下吧