Mobile Web Development Learning Summary

Recently, the company is preparing to develop a mobile phone website. I used to have a project team in my previous company, but I don't have the chance to see it. I just remember a mobile phone simulator is very handsome. Therefore, you can only temporarily stick to your feet. Baidu, Google, and the blog garden are all msdn.

The first is the concept line problem. Mobile websites use this keyword to search. Most of them are advertisements, coupled with. net. After half a day, what about mobile Internet? The search is incorrect. That is the scope of XX store. Finally,

The mobile Web development keyword was identified during the search process.

The next step is the configuration of the development environment. This vs must be available, and then it is developed based on the WAP of vs. On the Internet, I saw someone introducing the project of creating a smart device-> mobile Web application, however, the key is that vs2008 cannot find this project type. Once again, vs2003 is used and mobile Web Development + vs2008 is searched, someone has explained in detail what is going on. For more information, see this article.

It turns out that when Microsoft designed vs2005/vs2008, it split the mobile Web application. Fortunately, you can download the corresponding template and place it under "My template ".

Download link: Download link. The readme file in the file writes how to put it under "My template"

After completing the template, click "Create Project". There is no project for the mobile Web application. I carefully read the demo image in the above article. It seems that I did not mention the project, is it difficult to use a common website project? I tried it. That's OK (why? And delete default. aspx, create a project, choose my template, and move the web form. Then, we can see the dawn and finally complete the step.

Next, we need to test the environment. For mobile Web applications, we can use the tools provided by vs> Any simulator in the simulator Device Manager for testing, I chose Windows Mobile 5.0 Pocket PC R2 emulator, because my mobile phone is a wm6.5 system and is familiar with operations. Select the simulator type, and then operate-> connect, start slowly as usual, and then familiarize yourself with the WM system interface. Now that the machine is on, let's take a look at the WAP website and be familiar with it. Open ie in the simulator and enter wap.sina.com, prompting that the network cannot be accessed. To use Microsoft's ActiveSync, I use a Windows Mobile Device Center in my win7 system and do not need to download ActiveSync. Follow the prompts in the article, choose "operation"> "insert base". At this time, the ActiveSync/Windows Mobile Device Center will prompt a connection. Click "do not set contact..." to connect directly. The connection will be displayed as connected. The attempt to access wap.sina.com again failed. After reading the article, there is nothing else. I thought I was a local area network and used a proxy to access the Internet. Why? Click "connection settings" on the mobile phone and select "connect to the Internet on the mobile phone". Then, set the proxy server on the mobile phone to be consistent with the proxy server on the computer. Save the settings and access again. Finally, the connection is successful.

Switch to vs. At this time, you cannot access your program by using your mobile phone. Let's look at another article by the author and this article to understand that for the server, both web applications and mobile web applications are the same. The difference lies in the output file format. Web applications output HTML, the mobile Web application outputs WML. This explains why a WEB Project template can be used to create a mobile Web application. Follow the prompts in two articles to go to the Web. config system. web (in system. in the root of the Web), copy a section. Here I copied the content mentioned in the last article, because there are few mistakes. Then, add the MIME type in IIS. Because I use iis7 + virtual directory, the virtual directory inherits the MIME type of the default website, and does not need to be added. Then compile and access. There is no problem.

During this period, I went to w3cschool to check WML content and WMLScript, that is. WML and. WMLS, there are still a lot of things to learn, and now these are outdated, you can only use mobile Web form for development.

Back to the test environment, testing is always a little uncomfortable in such a small simulation environment. In the last article I mentioned, I mentioned several browsers that can directly open WML websites. According to the popular saying, opera is the most convenient and m3gate is the most rigorous. I use opera, it is easy to use, but mshortate does not know why the website cannot be opened and does not report any error. It can only be abandoned. It is recommended to use opera, so it will be nice to watch the huge O.

Finally, we turned to the code. Mobile web provided the control library, but there were some, but not many. I wrote a section myself and posted it to you for a look:

Aspx <% @ page Language = "C #" autoeventwireup = "true" inherits = "mobilewebapp. login "codebehind =" login. aspx. CS "%> <% @ register tagprefix =" mobile "namespace =" system. web. UI. mobilecontrols "assembly =" system. web. mobile "%> <HTML xmlns =" http://www.w3.org/1999/xhtml "> <body> <Mobile: Form ID =" form1 "runat =" server "> User name: <br/> <Mobile: textbox id = "mtbloginname" runat = "server"> </Mobile: textbox> <Mobile: customvalidator Controltovalidate = "mtbloginname" id = "customvalidator1" runat = "server" onservervalidate = "customvalidator1_servervalidate"> Invalid format! Eg: angel@sky.com </Mobile: customvalidator> <Mobile: requiredfieldvalidator controltovalidate = "mtbloginname" id = "requiredfieldvalidator1" runat = "server"> we need the loginname </Mobile: requiredfieldvalidator> password: <br/> <Mobile: textbox id = "mpassword" runat = "server" Password = "true"> </Mobile: textbox> <Mobile: command onclick = "btnlogin_click" runat = "server" id = "btnlogin"> logon </Mobile: Command> <br/> <Mobile: textview id = "MTV" runat = "server" visible = "false"> </Mobile: textview> </Mobile: Form> <Mobile: form ID = "form2" runat = "server"> <Mobile: Label id = "mlabel" runat = "server"> </Mobile: Label> </Mobile: form> </body> 

 
CS codeusing system;
Using system. collections;
Using system. componentmodel;
Using system. Data;
Using system. drawing;
Using system. Web;
Using system. Web. Mobile;
Using system. Web. sessionstate;
Using system. Web. UI;
Using system. Web. UI. mobilecontrols;
Using system. Web. UI. webcontrols;
Using system. Web. UI. htmlcontrols;

Namespace mobilewebapp
{
Public partial class login: system. Web. UI. mobilecontrols. mobilepage
{
Protected void page_load (Object sender, eventargs E)
{
Page. response. expires =-1;
Response. cachecontrol = "public ";
}

Protected void customvalidator1_servervalidate (Object sender, servervalidateeventargs ARGs)
{
System. Web. UI. mobilecontrols. customvalidator CV = (system. Web. UI. mobilecontrols. customvalidator) sender;
System. Web. UI. mobilecontrols. textbox TB = (system. Web. UI. mobilecontrols. textbox) form1.findcontrol (cv. controltovalidate );
Args. isvalid = Tb. Text. indexof ('@')> = 0;
}
Protected void btnlogin_click (Object sender, eventargs E)
{
If (page. isvalid)
{
String susername = mtbloginname. Text. Trim ();
String spass = mpassword. text;
Mlabel. Text = string. Format ("username: {0}; Password: {1}", susername, spass );
MTV. Text = mlabel. text;
Activeform = form2;
}
}
}
}
Here are some of the points that I remember for future reference:
1. breakafter = "true", automatically output one after the Control <br/>; otherwise, no output is made.
2. If there is no button, use command. I found only the one with the click button.
3. Mobile: The alternatetext of the image is reserved for the display text when the image cannot be displayed.
4. There is no color in the text, so don't bother to set forecolor and backcolor, because WML does not support color.
There is also the one mentioned in the previous article:
Page. response. expires =-1;
Response. cachecontrol = "public ";
To cancel the mobile device cache and use the redirecttomobilepage function for redirection.
As mentioned in the next article (this has never been used ):
1. When multiple parameters are passed, XXX. aspx? cannot be used? A = 1 & B = 2, instead of XXX. aspx? A = 1 & amp; B = 2, otherwise it cannot be parsed on opera
2. if you directly use <% = "your content" %> In the aspx corresponding to mobilepage, no output will be obtained during the final operation. The correct method is to create a mobile user control, you can use the control in this way, and then place the control in the page.
3. the mobile control does not have a repeater control and can only be replaced by the Mobile: list control. However, I personally think this is not easy to use. It is better to generate a string directly in the background, then, use the method 2 to put it in the custom control and output it.