百色建设网站,营销型网站建设细节,社交网站 建站,做网站服务器#x1f380; 文章作者#xff1a;二土电子 #x1f338; 关注公众号获取更多资料#xff01; #x1f438; 期待大家一起学习交流#xff01; 这里对之前的微信记事本小程序进行了重新编写#xff0c;增加了更加详细的步骤描述#xff0c;将全部图片都改成了本地图… 文章作者二土电子 关注公众号获取更多资料 期待大家一起学习交流 这里对之前的微信记事本小程序进行了重新编写增加了更加详细的步骤描述将全部图片都改成了本地图片针对一些细节进行了补充本文完整工程可关注文末公众号获取。 文章目录 一、安装开发工具二、新建小程序项目三、文件夹详解四、新建/删除页面4.1 删除页面4.2 添加页面 五、新建图标文件夹六、全局配置七、index页面设计7.1 设置页面背景7.2 添加日记本图标7.3 点击图标跳转 八、list页面设计8.1 添加日记按钮8.2 显示全部日记8.3 删除日记 九、add页面设计9.1 添加文本输入框9.2 添加保存按钮 十、details页面设计10.1 跳转实现10.2 详情页面实现 十一、注意事项 一、安装开发工具
注册这里就不再赘述了可以直接到微信公众平台注册账号。注册完成后进入页面点击左侧的“开发工具”下载自己所需的版本即可。 二、新建小程序项目
新建时我们选择不使用云服务选择TS-基础模板。 三、文件夹详解
第二步点击确定后我们就进入了微信小程序开发的页面。其中有许多文件夹这里我们简单介绍一下各个文件夹的作用。 pages 存放所有的小程序页面这里只有两个页面分别是index和logs。utils 用来存放工具性质的模块比如时间格式化。app.json 小程序的全局配置文件。app.ts 小程序的全局逻辑文件app.wxss 小程序的全局样式文件
除了上述描述的文件每一个页面都有自己的.jison、.ts、.wxml和.wxss文件
.jison jison是一种数据格式并不是编程语言在小程序中JSON扮演的静态配置的角色。值得注意的是.jison文件中不能添加注释。.wxml 类似于.html我们看到的一些控件都是在这里添加的。.ts 逻辑文件一些功能的函数实现。.wxss 样式文件用来调整整体页面一些控件或文字的样式。
四、新建/删除页面
我们要设计的记账本主要有个页面
index 引导页面有一个日记本图标点击可进入下一个页面。list 全部日记列表页面可在本页面点击添加日记、删除日记或者进入日记详情。add 添加日记页面。details 日记详情页面。
我们首先需要删除掉原先自带的logs页面然后新建其他几个页面。
4.1 删除页面
删除比较简单我们选中logs页面的文件夹右键删除即可但是不要忘记我们还需要在app.jison文件中将logs页面的路径删掉。 4.2 添加页面
添加页面也非常简单并不需要我们手动新建文件夹添加文件夹下面的其他文件。我们只需要在app.jison文件中写入我们想要添加的页面保存之后就会自动在pages文件夹中生成页面文件夹非常的方便。这里给大家演示一下。 五、新建图标文件夹
此次设计的日记本使用的是本地图标因此这里介绍的是如何添加本地图标当然也可以自己去网上找一些网页图片添加进来这里就不再做详细介绍了。
如果想使用本地图标我们需要给所有的图标准备一个文件夹这里我们直接新建到微信小程序工程文件所在的文件夹里。 六、全局配置
首先我们简单的对我们小程序全局进行简单的美化实际也就是在app.jison文件中修改窗口的一些参数。
我们修改了导航栏的背景颜色导航栏的文字和字体颜色。
这里贴一下程序方便复制粘贴 window: {backgroundTextStyle: light,navigationBarBackgroundColor: #c8b4eb,navigationBarTitleText: ertu电子,navigationBarTextStyle: white},七、index页面设计
7.1 设置页面背景
我们上面说了本次使用的图片全部是本地图片这里准备了一个背景图片存放在images文件夹添加进来即可。
.wxml文件程序
viewimage classbg-image src/images/background.jpg/image
/view.wxss文件程序
/* 背景图片样式 */
.bg-image{width: 100%;height: 100%;position: fixed;z-index: -1; /* 放在最底层 */
}至此背景图片添加完成可以看一下效果。 7.2 添加日记本图标
添加日记图标与上面的操作类似下载好图标后创建样式添加到页面。程序如下
.wxml程序
image classappicon src/images/diaryicon.png/image.wxss程序
/* App图标样式 */
.appicon{margin: 5%; /* 设置上、下、左、右间距 */width: 100rpx;height: 100rpx;position: fixed;
}实现效果如下 为了提示该图标功能为日记本这里添加一个文字提示.wxml文件添加下面的程序 text stylecolor: white; font-size: medium; position: relative; left: 36rpx; top: 145rpx日记本/text7.3 点击图标跳转
接下来我们需要实现点击日记本图标跳转到日记列表页面。实际就是给日记本图标添加一个点击事件的处理函数。
首先修改.wxml文件程序给图片的点击事件添加一个处理函数。
image classappicon src/images/diaryicon.png bind:tapgotolistpage/image然后在.ts文件中编写详细的函数实现。 gotolistpage(){wx.navigateTo({url: ../list/list //跳转链接})}
})实现效果如下 八、list页面设计
8.1 添加日记按钮
首先按照上面介绍的方法修改list页面的背景添加一个添加日记的图标给图标的点击事件添加一个跳转功能跳转到添加日记页面。实现效果如下 8.2 显示全部日记
显示全部日记首先需要在.wxml文件中添加一个滚动的控件用来显示全部日记列表程序如下 !--底部滚动--scroll-view classdes-scr scroll-ytrue!--循环显示所有日记内容--block wx:for{{totalDiaryConcent}}!-- 利用data-将当前的索引传递到删除或者打开详情的函数 --view classdes-view bindtapdiary_detail bindlongtapdelet data-content{{item}} data-saveid{{index}}text classdes-text{{item.des}}/texttext classdes-tiemText{{index 1}}/text/view!-- /navigator --/block/scroll-view通过上面的程序我们可以看出我们给每一条日记增加了一个点击事件处理函数和长按事件处理函数功能会在后面介绍。
然后在.ts文件中实现获取当前本地缓存的全部日记功能。首先在.ts文件中添加用到的数据 data: {id: ,totalDiaryConcent: [] // 全部日记},然后实现获取全部本地缓存日记功能 // 全部日记显示onShow: function () {// 获取当前全部日记内容// 必须要新定义一个再赋值才能正常显示原因未知var arryTemp wx.getStorageSync(totalDiaryConcent);this.setData({totalDiaryConcent: arryTemp})},8.3 删除日记
长按日记会弹出提示框点击确定后会删除对应日记这里有两个重点问题首先是如何知道用户选择的是哪一条日记其次是如何删除用户选择的日记。
首先说一下如何知道用户选择的哪一条日记这里利用data-将用户选中的日记ID传给.ts文件。
其次说一下知道了用户想要删除哪一条日记之后如何将该条日记删除掉这里用的方法个人觉得比较巧妙。定义一个新的数组获取到传递过来的日记ID后利用for循环将除了想要删除的日记外的之前的本地缓存日记全部重新缓存到新的数组然后缓存到本地缓存中。
但是需要注意的是这样虽然在本地缓存中删除了想要删除的日记但是会发现主页面中它并没有消失此时需要我们在删除完成后重新渲染一次页面。 // 删除日记内容delet:function(e:any){// 进行作用域外部指向let that this;wx.showModal({title: 温馨提示,content: 是否要删除这条日记,// 点击确定后删除掉对应缓存success (res) {if (res.confirm) {// 获取传递过来的索引var curId e.currentTarget.dataset.saveid;// 获取全部日记内容var arryTemp wx.getStorageSync(totalDiaryConcent);// 设置一个新的数组var newDiaryContent [];// 利用for循环将不需要删除的存储起来for (var i 0;i arryTemp.length;i ) {if (i ! curId) {newDiaryContent.push(arryTemp[i])}}// 重新更新全部日记内容其中不包含要删除的日记// 一定注意这里不要将新的日记内容用单引号引起来否则会出现删除一条日记后冒出来很多条空日记// 而且之后也不能再添加新日记wx.setStorageSync(totalDiaryConcent,newDiaryContent);}// 利用onShow中同样的方法重新渲染页面var arryTemp wx.getStorageSync(totalDiaryConcent);that.setData({totalDiaryConcent: arryTemp})}})},九、add页面设计
下面我们来设计一下添加日记的页面。
9.1 添加文本输入框
.wxml程序如下 !-- 输入长度默认限制为140maxlength为-1时表示不限制最大长度 --textarea class the-textarea bindinputgetInputText style margin: 5%;width: 90%;height: 90% maxlength-1/textarea文本输入框的输入时间由函数“getInputText”来处理用来回去输入的内容函数实现在.ts文件。 // 文字输入框getInputText(e:any) {//记录输入的文字 this.setData({inputText: e.detail.value})},9.2 添加保存按钮 !-- 保存按钮 --button classthe-btn bindtapsaveButton保存心情/button保存按钮的点击事件由“saveButton”函数来处理函数实现在.ts文件注释比较明确这里就不再赘述了。 // 保存按钮saveButton() {// 如果输入是空if (this.data.inputText.length 0) {return;}// 输入内容不为空else {// 获取本地缓存的之前的所有日记内容var diaryContent wx.getStorageSync(totalDiaryConcent);// 如果之前有日记内容if (diaryContent ! null diaryContent ! ) {// 获取当前日记总条数var curTotalNum wx.getStorageSync(totalDiaryNum);// 日记总条数加1作为下一条日记idvar nextDiaryId curTotalNum 1;// 添加新日记id为之前日记总条数加1diaryContent.push({ des: this.data.inputText, diaryid: nextDiaryId });// 存储新日记总条数wx.setStorageSync(totalDiaryNum, nextDiaryId);}// 之前没有日记内容是第一条日记else {diaryContent [{ des: this.data.inputText, diaryid: 0 }];// 保存第一条日记wx.setStorageSync(totalDiaryNum, 0);this.setData({id: 0})}}// 将输入内容存入缓存wx.setStorageSync(totalDiaryConcent, diaryContent);// 跳转回上一页面wx.navigateBack({})},在.ts文件中需要先定义好用到的数据 data: {inputText: , // 存储输入内容diaryid: },至此我们来看一下目前实现的效果 十、details页面设计
最后我们来设计日记详情页面也就是点击日记会跳转到日记详情。
10.1 跳转实现
在日记列表也就是list页面点击日记我们应该能够跳转到日记详情页面。所以我们给每一条日记都增加一个点击函数“diary_detail”函数实现是在list的.ts文件中。 // 查看日记详情diary_detail:function(e:any){// 获取点击的日记的内容var item e.currentTarget.dataset.content// 将点击到的日记的内容传递到下一个页面var url /pages/details/details?des item.deswx.navigateTo({url: url,})},10.2 详情页面实现
日记详情显示较为简单需要解决的问题主要有两个一个是如何确定用户想要查看的是哪条日记内容这个在删除日记中已经解决。第二个就是如何将用户想要查看的日记详情显示出来这里说白了就是如何实现页面间的传值将获取到的日记内容从主页传递到详情页面然后把它渲染到页面就好啦。
.wxml文件程序如下
view classdiary-detailtext{{showContent}}/text
/view.wxss文件程序如下
.diary-detail{font-size: large;color: #8B4513;/* 多文本自动换行 */word-break:break-all;
}.ts文件中加入获取日记内容的函数 /*** 生命周期函数--监听页面加载* 获取点击的日记内容*/onLoad(options) {this.setData({showContent: options.des})}十一、注意事项
本地图片路径中不要有中文当前的一些样式布局是根据IPhon5布局对于其他机型某些地方可能会出现比例失调或者错位的情况可以自行根据需要修改。本程序中的日记全部存储在本地缓存中只能本机看到其他用户无法看到。
